Jquery onclick on div

Question

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 ?

Answer 1

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);
});

Answer 2

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

Answer 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>