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

现在，当我检查 chrome 时，它​​根本不会触发 .click 函数:(

我做错了什么？

Answer 1

由于项目是动态创建的，因此您可以使用事件委托(delegate) 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 (){