-1

我有一个带有一些图像的表格，当调用 Ajax 时，它会删除前一个表格并返回另一个带有新图像的表格。

$("img").click(function(){
    $.post("gallery.php", function(data){
        $("#left-gallery, #right-gallery").html("").append(data);
    });
});

这就是我从 php 文件中获取信息的方式。

问题是新元素不会触发以前的点击事件。

如果我单击表格中的图像，它应该替换表格外部页面上的另一个图像。

$("#left-gallery img").click(function(){
    $("#left-gallery td").removeClass("highlighted");

    var source = $(this).attr("src");
    $("#image1-image").attr("src", source); //replaces a big image outside the table
    $(this).parents("td").addClass("highlighted");
});

表格图像嵌套如下：

<tr>
    <td>
        <a  href = "image.jpg"> 
            <img src = "image.jpg">
            Image
        </a>
    </td>
</tr>

即使阻止默认行为也不起作用。

$("td a").click(function(e){
    e.preventDefault();
});

javascript 在之后<body>并且是内部的。我不知道如何让点击事件或任何在返回的表上工作，任何帮助将不胜感激。
谢谢你。

4

1 回答 1

3

使用委托，因为您正在动态修改 DOM

$('#left-gallery').on('click','img',function(){
        // your code here
})

通过这样做，您将事件处理程序附加到 #left-gallery 元素 = 是静态的。然后它将监听来自后代图像的点击事件并在它们冒泡时处理它们

取决于您使用的 jQuery 版本

$('element').live('event',function({ code here..})); // jQuery 1.3+

$('staticparent').delegate('element', 'event', function(){ code here..}); // jQuery 1.4.3+

$('staticparent').on('event', 'element', function(){ code here.. }); // jQuery 1.7+

你在做

$("#left-gallery img").click(function(){

它将事件处理程序绑定到图像.. 修改 dom 后图像不再存在.. 并且您永远不会将事件处理程序绑定到新添加的图像，所以这就是点击没有做任何事情的原因

于 2013-01-11T15:57:35.117 回答