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

这是一个缩小的示例，说明在ajax返回数据（右数据）后，.item click函数如何不再可见 没什么

<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>

点击器
$（'.item'）。单击（函数（）{
log（'yesclicked'）；
});
$（文档）。查找（“div.curve4 li”）。在（“单击”，函数（e）{
e、 预防默认值（）；
var selection=“nevada”/$（this）.find（“a”）.first（）.attr（“href”）.split（“=”[1]；
console.log（“选择：”+选择）；
var，该值=$（此值）；
$.ajax({
url:“/images ajax.php”，
cache:false，
数据：“s=”+选择，
方法：“张贴”，
成功：函数（html）{
$（“.masonryImg”）.html（html）；
$（“div.curve4 li”）。删除类（“选定”）；
添加类别（“选定”）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
控制台日志（xhr.status）；
控制台日志（thrownError）；
}
});
});

返回的输出被正确地放入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'>

一个主题是原始数据只有数据src部分，而不是src（上面的ajax同时返回这两个部分）。但是如果上面的ajax没有src部分，只有src数据，那么图像就不会显示

在ajax调用之前，屏幕上写入的数据是：

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

document.write（“”）；

问题是jQuery只附加了一次事件，但是当您覆盖html时，事件就会丢失。相反，在上使用jquery的

：

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

问题是jQuery只附加一次事件，但是当您覆盖html时，事件就会丢失。相反，在

上使用jquery的

：

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