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

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!");
});