4

我有一些 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);
    }
});

});

4

3 回答 3

7

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

在这种情况下，您不能使用标准的点击绑定，因为它们仅适用于 DOM 中已经存在的元素。

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

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

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

如果您碰巧使用旧版本的 jQuery，请改用delegate()。有关不同绑定方法的更多详细信息，以及添加它们的时间以及替换的对象和时间，
请参阅这篇文章。

于 2012-08-02T11:50:06.120 回答
1

弗朗索瓦·瓦尔是对的。这是如何工作的，您在最近的静态“父”元素上添加一个事件处理程序。因此，当在其任何子元素上触发 click 事件时，它会传播到该父元素并触发事件处理程序。

当您向 DOM 添加新元素时，jQuery 不能在它们上注册任何事件处理程序。唯一的选择是将事件处理程序附加到父元素上并让事件向上传播。因此，无论您在 DOM 中添加多少新元素，事件都会在父元素处触发。

于 2012-08-02T11:59:54.147 回答
-1

尝试使用直播活动： http ://api.jquery.com/live/

于 2012-08-02T11:49:30.763 回答