Question

这是ajax返回数据后，.item单击函数不再可见的缩小示例（右数据）没有

<div class='curve4' id='leftMenuPanel'>
   <li>clicker</li>
</div>

                <script>
$('.item').click(function() {
    console.log('yes clicked');
});

        $(document).find("div.curve4 li").on("click", function(e){

                e.preventDefault();

                var selection = "nevada"; //$(this).find("a").first().attr("href").split("=")[1];
                console.log("selection: "+selection);

                var that = $(this);

                $.ajax({
                        url:"/images-ajax.php",
                        cache:false,
                        data:"s="+selection,
                        method:"post",
                        success:function(html){
                                $(".masonryImg").html(html);
                                $("div.curve4 li").removeClass("selected");
                                that.addClass("selected");
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                                console.log(xhr.status);
                                console.log(thrownError);
                          }
                });

        });
        </script>

返回的输出正确放入div中，但是当点击从ajax返回的新图像时，ajax调用上方的javascript 3行不再有效。

这是ajax的回报：

<img class='item' data-src='/images/500/2014-01-04-lajolla-seal-5d3_8809.jpg' width='300' src='/images/500/2014-01-04-lajolla-seal-5d3_8809.jpg'>
<img class='item' data-src='/images/500/2014-01-04-lajolla-sunset-1x_22133.jpg' width='300' src='/images/500/2014-01-04-lajolla-sunset-1x_22133.jpg'>
<img class='item' data-src='/images/500/2014-01-04-lajolla-cave-5d3_8545.jpg' width='300' src='/images/500/2014-01-04-lajolla-cave-5d3_8545.jpg'>

一个主题是原始数据只有data-src部分，而不是src（上面的ajax返回两者）。但如果上面的ajax没有src部分且只有data-src，则图像不会显示。

在ajax调用之前

，屏幕上写的数据是：

document.write('<img class="item" data-src="'
                           + imagesLocation + images[currentImage] + ".jpg"
                           +'" width="300">');

Answer 1

问题是jQuery会附加一次事件，但是当你覆盖html时，事件就会丢失。相反，使用jquery的on：

$(".masonryImg").on("click", ".item", function() {
    console.log("Clicked!");
});

jQuery ajax返回图像数据，但其他JS代码不再可见

1 个答案: