jQuery點擊處理程序不會觸發所有元素

我需要基於從PHP返回的JSON（我使用MySQL從數據庫中獲取該信息）創建一些按鈕。下面的代碼通過創建我需要的按鈕來工作，但由於某種原因，只有當我點擊列表中的第一個按鈕時纔會調用點擊處理程序。任何想法爲什麼處理程序不會觸發所有按鈕，我該如何修復它？jQuery點擊處理程序不會觸發所有元素

$(document).ready(function() { 

$.ajax({ url: "file.php", data: "id=1", dataType: "json", type: "post", 
    success: function(data) { 
    $.each(data, function(index, element) { 
     var classBtns=""; 
     $.each(return_array(element.date), function(i, d) { 
     class_button = "<span class='button' id='classBtn' data-date='"+d+"' data-time='"+element.time+"'>Press</span>"; 
     classBtns += "<p class='goingDates'>"+d+class_button+"</p>"; 
     }); 
     $('div').append(classBtns); 
    }); 

    $("#classBtn").on("click", function() { 
     alert("clicked "+$(this).data('date')); 
    }); 
    } 
}); 
});

另外，通過$（this）.data傳遞數據是獲得我需要的數據到點擊處理程序的最佳方式嗎？如果可能的話，我更希望它不能在HTML中可見，但我無法弄清楚爲什麼要讓處理程序可以訪問該數據。如果我將click處理程序放入任何$ .each語句中，則單擊按鈕時會多次調用該警報。

來源

2013-06-20 CMH

這是因爲您正在使用ID選擇器而不是CLASS – Nazariy

在HTML頁面中的第一個ID是應該是唯一的。

接下來，您將需要委託的事件爲動態創建的元素的單擊事件工作

如果有與同一ID

此選擇多個元素$('#classBtn')將只取第一個實例不管有多少個具有該ID的元素可用。

使用class instead..

我看你已經爲元素定義的類。因此，擺脫ID

而這段代碼

$("#classBtn").on("click", function() {

改變

$(document).on("click", ".button" function() {

爲了獲得更好的性能，您可以委託事件的元素，而不是document的static Ancestor。

您綁定事件的方式，它們可能被多次綁定到相同的元素。所以這一段代碼移到Ajax請求外

$(document).ready(function() { 

    $.ajax({ 
     url: "file.php", 
     data: "id=1", 
     dataType: "json", 
     type: "post", 
     success: function (data) { 
      $.each(data, function (index, element) { 
       var classBtns = ""; 
       $.each(return_array(element.date), function (i, d) { 
        class_button = "<span class='button' id='classBtn' data-date='" + d + "' data-time='" + element.time + "'>Press</span>"; 
        classBtns += "<p class='goingDates'>" + d + class_button + "</p>"; 
       }); 
       $('div').append(classBtns); 
      }); 
     } 
    }); 

    $(document).on("click", ".button" function() { 
     alert("clicked " + $(this).data('date')); 
    }); 
});

來源

2013-06-20 23:49:10

好的結果。起初我沒有注意到這個代表團的事情。在我看來，這是被接受的答案。不是我的。 :-) –

他在添加動態元素後綁定了點擊處理程序，而不是在DOM被加載時，因此委派並不是真的必要。 – Barmar

aahh right ..沒有觀察到..謝謝指出 –

ID，如「#classBtn」意味着是唯一的，所以jQuery將只使用它找到的第一個實例。使用類別（例如「.classBtn」）。

來源

2013-06-20 23:49:25

使用class =「classBtn」而不是id =「classBtn」。 $（this）.data也可以正常工作。

來源

2013-06-20 23:50:19 osbomb

jQuery點擊處理程序不會觸發所有元素

回答

相關問題