jquery .click не запускается

Question

У меня есть (возможно) очень простая проблема, но я не могу понять, что не так. Я пытаюсь запустить .click() jquery, но он не запускается. Я думаю, это потому, что фактические элементы DOM создаются динамически с помощью javascript (это имеет значение?).

динамически созданные содержание:

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

Теперь, когда я проверяю хром, это не вызывает функцию .click вообще :(

Что я я делаю неправильно?

Answer 1

Как элементов создаются динамически, вы можете использовать делегирование событий с jquery .on() method:

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

Если вы с Олди версии JQuery, вы можете сделать то же самое с live

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

Answer 2

Если элементы создаются динамически, то вы хотите, чтобы u се

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

Кроме того, вы можете захотеть пересмотреть имеющие имя класса будучи class.

См. here для документации. См. here для аналогичного вопроса.

Answer 3

Вам необходимо использовать метод .on() и узнать event delegation, для динамически созданных элементов. Bind событие с ближайшей статической емкости

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