Javascript在ajax请求后不执行元素

Javascript not executing on elements after ajax request

本文关键字:执行 元素 请求 ajax Javascript      更新时间:2023-09-26

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

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

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

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

取决于你使用的是哪个版本的jQuery

$("元素")。Live ('event',function({code here.}));//jQuery 1.3+

$('staticparent').delegate('element', 'event', function(){这里的代码…});//jQuery 1.4.3+

$ (' staticparent ')。On ('event', 'element', function(){代码在这里..});//jQuery 1.7+

你在做

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

将事件处理程序绑定到图像..修改dom后,图像不再存在。而且你从来没有将事件处理程序绑定到新添加的图像上所以这就是为什么点击没有做任何事情