44

I have a simple question. The following code works for all the tags:

$('*').click(function(e) {  
    alert(1);
});

But, when I try this code for the div with id "content":

$('#content').click(function(e) {  
    alert(1);
});

What am I doing wrong ?

1
  • I don't know, what are you doing wrong (as in the error/unexpected)? Aug 12, 2011 at 0:10

6 Answers 6

56

Make sure it's within a document ready tagAlternatively, try using .live

$(document).ready(function(){

    $('#content').live('click', function(e) {  
        alert(1);
    });
});

Example:

$(document).ready(function() {
    $('#content').click(function(e) {  
      alert(1);
    });
});
#content {
    padding: 20px;
    background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="content">Hello world</div>

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

$('#content').on( "click", function() {
    alert(1);
});
14

Nothing.

$('#content').click(function(e) {  
    alert(1);
});

Will bind to an existing HTML element with the ID set to content, and will show a message box on click.

  • Make sure that #content exists before using that code
  • That the ID is unique
  • Check your Javascript console for any errors or issues
0
3

js

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>


<script type="text/javascript">

$(document).ready(function(){
    $("#div1").on('click', function(){
            console.log("click!!!");
        });
});

</script>

html

<div id="div1">div!</div>
1

May the div with id="content" not be created when this event is attached? You can try live() jquery method.

Else there may be multiple divs with the same id or you just spelled it wrong, it happens...

1

Wrap the code in $(document).ready() method or $().

$(function(){

$('#content').click(function(e) {  
    alert(1);
});

});
1
  • 1
    Whenever you want to find any element or attach event handler to dom elements make sure you do it in $() or $(document).ready() method. $("*") works because it attachs event to the document and uses event bubling mechanism to execute the event handlers. Aug 12, 2011 at 0:22
0

Check out this fiddle ... you're doing it correctly. Make sure the id is content and also check to see there are no other elements with the same id. If there are multiple elements with the same id, it will bind to the first one. That might be why you arn't seeing it.

1
  • Thanks, another thing I forgot to mention is that any other tag doesn't work (body, html etc..) Aug 12, 2011 at 0:10

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.