javascript - click 事件不适用于 chrome(jQuery) 中动态插入的元素

Question

我在这里所做的是动态创建一个下拉列表并绑定(bind) click事件至<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);

据我所知here ，由于我动态添加内容，因此我将事件处理委托(delegate)给 DOM 中最顶层的元素。

现在我的问题是这在 Chrome 中无法按预期工作。在火狐中它似乎工作得很好。

我也读过this链接和 other一个但无济于事。

有趣的是，当我代替 '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);
    });

这似乎可以解决问题，但是我想知道为什么它在原始情况下不起作用以及可能的解决方法。

这是一个fiddle对于我迄今为止所做的事情。

更新:我还查看了this link 。然而，这只是纯 JavaScript，我想知道为什么它在我的情况下不起作用。更具体地说，在我们指定选择器的委托(delegate)事件处理程序中，为什么它在 'select option' 处失败并在 'select' 工作在 Chrome 中？

Answer 1

问题是因为您将 click 事件附加到不太可靠的 option 元素。 click 事件应该在 select 本身上进行 - 但请注意，即使这样也不遵循最佳实践，因为您应该使用 change 事件，因此即使通过键盘选择该选项，您的代码也会被触发。要获取处理程序中所选选项的值，请使用 $(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>