javascript - 将 jquery 监听器添加到动态创建的元素

Question

我需要向一些动态创建的元素添加一个 jquery 监听器。我一生都无法让它发挥作用。 tag_options 不是动态的，它的子选项是动态的。我尝试了三种方法:

http://jsfiddle.net/nfe2f/

<div id = "tag_options">
    <div class = "tag_option">hover me</div>
</div>

js:

// never works
$('#tag_options').delegate('.tag_option', 'hover', function(event){
 alert();
});


// never works
$("#tag_options").on("hover", "[class='tag_option']", function(event) {   
    alert();
});


// works if not dynamically created
$('#tag_options .tag_option').hover( function(){
    alert();
 });

Answer 1

不再有 hover 事件，并且 delegate 正在逐步淘汰，取而代之的是 on。您需要使用 mouseenter 和 mouseleave。我相信你正在为此而努力:

$('#tag_options')
  .on('mouseenter', '.tag_option', function(e){
    /* Wax On */
  })
  .on('mouseleave', '.tag_option', function(e){
    /* Wax Off */
  });

如果您希望将其保留在一个on上，您可以按照palaѕн的建议进行操作。我只是想让它更容易理解:

$('#tag_options').on('mouseenter mouseleave', '.tag_option', function(event){
  if ( event.type === 'mouseenter' ) {
    /* Wax On */
  } else {
    /* Wax Off */
  }
});