如何处理稍后将在jQuery中添加的内容？

Question

我想要控制在运行时自动创建的画布。 这里的问题是jQuery函数将不得不处理页面为ready时不存在的内容。

$(document).ready(function(ee) { 
    $("#containerInsertBtn").click(function(e) { 
     e.preventDefault(); 
     $("#container").html("<canvas width='300' height='300' id='tk'>fall</canvas>");  
    }); 

    $("#tk").click(function(eg) { 
     alert('tic'); 
    }); 

}); 

的HTML标记：

<div id="container" contenteditable="true"></div> 
<button id="containerInsertBtn">Add Canvas</button> 

Answer 1

可以使用。对（）的，像：

$(document).on("click", "#tk", function(eg) { 
    alert('tic'); 
}); 

OR，

$(document).on("click", "canvas", function() { 
    console.log($(this).attr("id")); //gives you the id of clicked canvas 
}); 

查看更多在这里： ：jQuery .on()

Answer 2

您可以（如其他答案建议）使用on，或者对于您的简单情况，您可以在元素出现的同时绑定事件。

您不必在顶层的所有事件绑定你ready回调中：

$(document).ready(function(ee) { 
    $("#containerInsertBtn").click(function(e) { 
     e.preventDefault(); 
     $("#container").html("<canvas width='300' height='300' id='tk'>fall</canvas>");  

     $("#tk").click(function(eg) { 
      alert('tic'); 
     }); 
    }); 
}); 

Answer 3

您的代码不起作用，因为一个动态创建的元素将不被包括在DOM而事件处理程序被执行。

您的解决方案是事件代表团。 jQuery有.on()这样做。

$("body").on('click', '#tk', function(e) { 
    //.... 
}); 

你需要指定一个父容器委派事件及其子元素liek #tk

如果要委托给基于其标签名，其作为同上一个元素。

$("body").on('click', 'canvas', function(e) { 
    console.log($(this)); // you can access the active element by using $(this) 
    //.... 
});