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

您可以使用.on（），例如：

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

或，

$(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)
    //....
});

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

3 个答案: