兩個獨立的$ .ajax通過點擊功能互相擊殺對方

所以這裏是問題：我在一個頁面中有兩個點擊事件。首先，當你點擊縮略圖時，它會打開一個模式，在PC上顯示像Instagram一樣的更大圖像（我製作了一個Instagram克隆，用於練習btw）。另一個按鈕用於顯示更多圖像。

問題是，我使用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請求不再運行。

來源

2016-12-31 Máté Nagy

你需要點擊功能追加到加載內容。在加載頁面js附加點擊加載的內容，但點擊後不要追加這新的動態加載的內容。 – Eugen

謝謝你的迴應！你可以寫一個更具體一些或一些例子，因爲我不明白我必須改變或做什麼。 –

我認爲你應該在每個'on'之前使用'unbind'事件。像'pic.unbind（'click'）。bind（'click'，function（event）{event.preventDefault（）; // etc}）;'More info [here]（http://api.jquery.com /解除綁定/）。 –

在document節點上使用.on()的重載版本。

$(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); 
});

來源

2016-12-31 12:35:23

live（）在jQuery 1.9中被刪除。 –

你使用的是什麼版本？ –

jQuery版本2.2.4 –

兩個獨立的$ .ajax通過點擊功能互相擊殺對方

回答

相關問題