單擊事件不適用於 chrome(jQuery) 中動態插入的元素

Question

我在這里做的是我動態創建一個下拉列表並將click事件綁定到<select>的<option> <select>

var $select = $('<select></select>'),
    $option1 = $('<option>a</option>'),
    $option2 = $('<option>b</option>');

    $option1.val(1);
    $option2.val(2);

$(document.body).on('click','select option',function(){
      console.log("click-option works");
    });

    $select.append($option1);
    $select.append($option2);

    $(document.body).append($select);

正如我在這里讀到的，由於我是動態添加內容，因此我將事件處理委托給 DOM 中最頂層的元素。

現在我的問題是這在 chrome 中沒有按預期工作。 在火狐中它似乎工作正常。

我也通讀了這個鏈接和另一個鏈接，但無濟於事。

有趣的是，當我代替'select option'選擇器執行此操作時

$(document.body).on('click','select',function(){
      console.log("click-option works");
    });

輸出已記錄，但這絕對不是我的想法。 每當我選擇下拉菜單時都會記錄輸出，更不用說下拉菜單中的選項了。 作為臨時解決方法，我通過以下方式使用change事件：

$(document.body).on('change','select',function(event){
      console.log("change works");
      console.log(event);
    });

這似乎可以解決問題，但是我想知道為什么它在原始案例中不起作用，如果可能，還有任何變通方法。

這是我迄今為止所做的事情的小提琴。

更新：我也檢查了這個鏈接。 然而，這僅適用於純 javascript，我想知道為什么它在我的情況下不起作用。 更具體地說，在我們指定選擇器的委托事件處理程序中，為什么它在'select option'處失敗而在 chrome 中的'select'處工作？

Answer 1

問題是因為您將click事件附加到不太可靠的option元素。 click事件應該繼續select本身 - 但請注意，即使這不遵循最佳實踐，因為您應該使用change事件，以便即使通過鍵盤選擇該選項也會觸發您的代碼。 要獲取處理程序中所選 ooption 的值，請使用$(this).val() ，如下所示：

 var $select = $('<select></select>'), $option1 = $('<option>a</option>'), $option2 = $('<option>b</option>'); $option1.val(1); $option2.val(2); $(document).on('change', 'select', function() { console.log($(this).val()); }); $select.append($option1); $select.append($option2); $('body').append($select);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另請注意，這可以縮短為：

 $(document).on('change', 'select', function() { console.log($(this).val()); }); $('<select><option value="1">a</option><option value="2">b</option></select>').appendTo('body');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>