jQuery Ajax調用似乎只工作一次？

Question

我有一堆圖像，人們可以單擊頂部的一顆心來“愛”或“取消愛”。 我想出了如何使其與Ajax / jQuery一起使用的方法，但是由於某種原因，它只能使用once 。

下方的圖片也有指向它的鏈接...所以我需要對疊加在頂部的heart div進行preventDefault。 再次，一次。

結構如下：

<a href="...">
<div class="image">
  <img src="...">
    <div class="love-response love"></div>
</div>
</a>

因此，如果他們單擊心臟，則心臟可以正常工作...但是如果再次單擊心臟，則它會轉到下面圖像的鏈接。 但是，如果他們在單擊鏈接后重新加載頁面，則可以再次單擊該頁面，這樣可以取消該頁面。 但是再一次，如果他們再次單擊而不重新加載，它將再次轉到下面的圖像。

我認為這與以下事實有關：返回json數據，然后更新內容，但是在進一步單擊時，它以某種方式不再執行preventDefault。

這有什么問題嗎？

jQuery(document).ready(function($){
$('.love').click(function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $("#love-response-" + id).hide();
  $("#love-waiting-" + id).show();
  $.ajax({
    url: "https://www.domain.com/love.php?id=" + id,
    type: "GET",
    dataType: 'json',
    success: function(json) {
        if(json.valid == 1) {

            $("#love-waiting-" + id).hide();
            $("#love-response-" + id).replaceWith(json.message);
            $("#love-response-" + id).show();

        }
        else {
            $("#love-waiting-" + id).hide();
            $("#love-response-" + id).replaceWith(json.message);
            $("#love-response-" + id).show();
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {

        $("#love-waiting-" + id).hide();
        $("#love-response-" + id).html('ERROR');
    },
    timeout: 15000
  });
});
});

json非常基本。 可能是：

{
"valid":"0",
"message":"<div class=\"love-response love\" id=\"love-response-782\" data-id=\"782\"><span class=\"icon love-black\"><\/span><\/div>"
}

要么

{
"valid":"1",
"message":"<div class=\"love-response love\" id=\"love-response-782\" data-id=\"782\"><span class=\"icon love-red\"><\/span><\/div>"
}

我真的覺得問題是出自json的響應后，preventDefault不再執行了。

Answer 1

委派click事件處理程序給某事。 由於.love是受操縱的dom（通過ajax加載），因此多數民眾贊成在您的DOM中，因此它僅觸發一次，因為執行腳本時該元素不存在

簡單地改變

 $('.love').click(function (e) {

至

 $(document).on('click','.love',function (e) {

Answer 2

執行此操作時：

$('.love').click(function (e) {

您正在將該功能附加到那些匹配元素的click事件上。 不給選擇器 ，但向其中當時選擇的元素。 然后，當您執行此操作時：

$("#love-response-" + id).replaceWith(json.message);

您刪除這些元素並添加新的元素。 這些新事件沒有與之相關的點擊事件。 舊的做到了。

您可以使用事件委托來更正此問題。 這意味着綁定到某些公共父元素的click事件，並基於某些選擇器過濾單擊的來源。 最簡單地，它看起來像這樣：

$(document).on('click', '.love', function (e) {
    // your code
});