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。

请参阅 here 以获取相关文档。有关类似问题，请参阅 here 。

Answer 2

对于动态创建的元素，您需要使用.on()方法并学习event delegation。使用最近的静态容器绑定事件

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

Answer 3

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

jquery .click不会触发

3 个答案: