jquery - 动态创建的图像行不会触发点击事件

Question

我有一些jquery，它向脚本发出ajax 请求并返回一些json 结果。然后解析这些结果并创建一个小图像库。然后将其添加到我的表单中。这一点一切都很完美......我遇到的问题是我试图触发图像事件，以便当您单击图像时我可以进行更多处理......但我只是无法让 onclick 工作......

如果有人有任何指点，我将不胜感激。

  $('.imgSel').click(function()
{
    alert("I WORK!!!!");
});


$("#mydiv").change(function(){ 
{
var url = "ajax_pics.php";

$.ajax({
    type: "GET",
    url: url,
    error: function(data){
        console.log("could not get get pics");
    },
    success: function(data){
        console.log(data);
        var pics = jQuery.parseJSON( data );
    $("#imageResultsDiv").remove();
    var imageResults ='<label>Image</label><div id="currImg"></div>';


    imageResults += "<div style='clear:both'></div><ul>";
    imageResults += "<div id='imageResultsDiv'><ul>";
    for(var i in pics) 
    {
        imageResults +="<li>"; 
        imageResults +="<img class='imgSel' id='"+pics[i].filename+"' src='"+pics[i].image+"'  title='"+pics[i].summary+"'>"; 
        imageResults +="<br/><small>"+pics[i].title+"</small>"; 
        imageResults +="</li>";
    }
    imageResults +="</ul>";

    $('#picsplaceholder').before(imageResults);
    }
});

});

Answer 1

如果我理解正确的话，您正在向 DOM 动态添加元素。

在这种情况下，您无法使用标准点击绑定(bind)，因为它们仅绑定(bind)到 DOM 中已存在的元素。

尝试使用on() ，这是自 jQuery 1.7 以来的首选方法:

$('#mydiv').on("click", ".imgSel", function()
{
    alert("I WORK!!!!");
});

您必须使用最接近的静态元素进行绑定(bind)，然后指定要应用单击事件的子元素。我认为在你的情况下 $('#mydiv') 是最接近的静态元素。

如果您碰巧使用旧版本的 jQuery，请使用 delegate()相反。
请参阅this post有关不同绑定(bind)方法、何时添加以及谁替换了哪些绑定(bind)方法以及何时添加的更多详细信息。