CODEWITHSUNDEEP
javascriptjquery
Tomasz Golinski
Tomasz Golinski

Reputation: 728

jquery .click does not trigger

I have a (probably) very easy problem to fix, but I can't figure out what's wrong. I try to run .click() jquery but it does not trigger. I think it's because the actual DOM items get created dynamically with javascript (does it matter?).

the dynamically created content is:

<div class="rPics">
    <div class="class">
        <canvas id="canSSJ01" class="thumbCan" width="600" height="720"></canvas>
        <p class="cDID hidden">SSJ01</p>
    </div>
    <div class="class">
        <canvas id="canSSJ02" class="thumbCan" width="600" height="720"></canvas>
        <p class="cDID hidden">SSJ02</p>
    </div>
</div>

Javascript:

$('.class').click(function(){
  globalJID = $(this).children(".cDID").text();
  console.debug("clicked thCC: "+globalJID);
});

Now when I check chrome, it does not trigger the .click function at all :(

what am i doing wrong?

Upvotes: 0

Views: 69

Answers (3)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

As the items are created dynamically, you can use event delegation with jquery .on() method:

$(document).on('click', '.class', function (){   //Here use `on`
  globalJID = $(this).children(".cDID").text();
  console.debug("clicked thCC: "+globalJID);
});

If you're with an oldie jquery version, you can accomplish the same with live

 $(document).live('click', function (){

Upvotes: 2

acarlon
acarlon

Reputation: 17272

If the elements are created dynamically, then you want to use 

$( document ).on( 'click', '.class', function () {

Also you might want to rethink having the class name being class.

Refer here for the documentation. Refer here for a similar question.

Upvotes: 2

Satpal
Satpal

Reputation: 133403

You need to use .on() method and learn event delegation, for dynamically created elements. Bind event with nearest static container 

$(document).on('click', '.class', function(){
  globalJID = $(this).children(".cDID").text();
  console.debug("clicked thCC: "+globalJID);
});

Upvotes: 2

Related Questions