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

如果元素是动态创建的，那么您想使用

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

另外，您可能想重新考虑将类名设置为class 。

请参阅此处的文档。 有关类似问题，请参见此处 。

Answer 2

对于动态创建的元素，您需要使用.on（）方法并学习事件委托 。 将事件与最近的静态容器绑定

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

Answer 3

由于项目是动态创建的，因此可以将事件委托与jquery .on（）方法一起使用 ：

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

如果您使用的是旧版jQuery，则可以使用live完成相同的操作

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