点击事件不工作的动态插入元素在chrome(jQuery)

click event not working on dynamically inserted element in chrome(jQuery)

本文关键字：元素 chrome jQuery 插入 动态 事件 工作      更新时间：2023-09-26

我在这里做的是动态创建一个下拉列表，并将click事件绑定到<select>

中的<option>
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'失败，并在'select' chrome工作?

问题是因为您将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>

相关文章：