javascript - 使用jq通过html()或append()将html注入(inject)到另一个元素注入(inject)的元素不能被jq访问但使用JS它可以工作吗？

Question

这是我的代码:

//This works
$("#addNew").click(function(){
    $("#Q_countainer").append("<img class='MyClassName' src='0369.png' >");
});
//This doesn't work
$(".MyClassName").click(function(){
    alert("HERE")
});
//This doesn't work either
$(document).on("click",".MyClassName",function(){
    alert("HERE")   
});

第一部分在 id="Q_counttainer" 的元素内添加图像。第二和第三部分无法通过类、id、名称或任何内容检测 img。

Answer 1

//This works
$("#addNew").click(function(){
    //This does work, but...
    $('<img class="MyClassName" src="0369.png">')
      .appendTo($("#Q_countainer"))
      .click(function(){
        alert("HERE 1");
    });
});

// ... this is better (this will work only *after* #addNew will have been clicked)
// This is called delegated events and is a good practice.
$(document).on("click",".MyClassName",function(){
    alert("HERE 2");
});

这是一个JSFiddle demo