Question

所以这是问题所在：我在一个页面中有两个点击事件。第一次当你点击缩略图时，它会打开一个模态，在PC上显示像Instagram这样的更大的图像（我为实践btw制作了一个Instagram克隆版）。另一个按钮用于显示更多图像。

问题是，我使用ajax来获取一些变量并传递给php。当页面加载时，它只显示3张图片，当我点击其中一张图片时，它会在模态中显示正确的图像，但是当我点击显示更多时，它会显示3个以上，之后我点击缩略图它被卡住了。我的意思是它只显示一张图片并不重要我点击了哪个缩略图，因此ajax请求不会再次运行。我希望你能理解这个问题，并能帮助我。（对不起我的英文）。

所以这是代码：

这是ajax调用函数：

function ajaxShow(urls,datas,element){
    $.ajax({
        url: urls,
        data: {datas: datas},
        cache:true,
    }).always(function(result){
        console.log("done");
        element.html(result);
    });
}

这些是点击事件：

$(document).ready(function(){
    //Open picture in modal
    var pic = $(".pics");
    var modalCont = $(".modal-content");

    pic.on('click',function(event){
        event.preventDefault();
        var id = $(this).attr('data-id');
        console.log(id);
        ajaxShow("../php/ajax_modal.php",id,modalCont);
    });

    //Load more
    var smbt = $(".smbt");
    var limit = $(smbt).data('loaded');

    smbt.on('click',function(event) {
        event.preventDefault();
        var cont = $("#cont");
        limit += 3;
        console.log(limit);
        ajaxShow("../php/show_more.php",limit,cont);
    });
});

简而言之：点击加载后，模态打开ajax请求不再运行。

Answer 1

在.on()节点上使用document的重载版本。

$(document).on(events, selector, data, handler );

所以你的代码应该重写为：

$(document).on('click', '.pics', null, function (event) {   
    event.preventDefault();
    var id = $(this).attr('data-id');
    console.log(id);
    ajaxShow("../php/ajax_modal.php",id,modalCont);
});

和

$(document).on('click', '.smbt', null, function (event) {
    event.preventDefault();
    var cont = $("#cont");
    limit += 3;
    console.log(limit);
    ajaxShow("../php/show_more.php",limit,cont);
});

两个单独的$ .ajax电话＆＃34; kill＆＃34;点击功能相互对话

1 个答案: