CODEWITHSUNDEEP
jquery
Etienne Noël
Etienne Noël

Reputation: 6176

Jquery onclick on div

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 ?

Upvotes: 44

Views: 219761

Answers (6)

Ryosuke Hujisawa
Ryosuke Hujisawa

Reputation: 2872

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>

Upvotes: 3

Steve Robbins
Steve Robbins

Reputation: 13822

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

Upvotes: 57

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

$(function(){

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

});

Upvotes: 1

Mironor
Mironor

Reputation: 1187

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

Upvotes: 1

foxy
foxy

Reputation: 7672

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

Upvotes: 14

Amin Eshaq
Amin Eshaq

Reputation: 4024

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.

Upvotes: 0

Related Questions