Question

我有一个包含一些图像的表，当调用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>之后，是内部的。我不知道如何获得点击事件或任何工作在返回的表格上，任何帮助将不胜感激谢谢。

Answer 1

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

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

通过执行此操作，您将事件处理程序附加到#left-gallery element =静态。然后，它将从后代图像中侦听点击事件，并在它们冒泡时处理它们

取决于您使用的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后图像不再存在..并且您永远不会将事件处理程序绑定到新添加的图像，这就是为什么点击没有做任何事情

在ajax请求之后Javascript没有在元素上执行

1 个答案: