Question

我在这里做的是动态创建一个下拉列表并将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时，由于我正在动态添加内容，因此我将事件处理委托给DOM中最顶层的元素。

现在我的问题是这不符合预期的铬。在火狐中似乎工作得很好。

我还阅读了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，我想知道为什么它在我的情况下鼻涕。更具体地说，在我们指定选择器的委托事件处理程序中，为什么它在'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>

click事件无法处理chrome中的动态插入元素（jQuery）

1 个答案: