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. 你想使用mouseenterand 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 */
  }
});

Answer 2

发生这种情况是因为没有.on("hover"事件。您可以使用mouseenter或mouseleave喜欢：

$(function () {

    // Attach Event
    // new way (jQuery 1.7+) - on(events, selector, handler);
    $('#tag_options').on('mouseenter mouseleave', '.tag_option', function (e) {
        alert(e.type);
    });

    // Create elements dynamically
    $('#tag_options').append('<div class="tag_option">hover me</div>');
});

小提琴

Answer 3

第一个答案的例子：

$('#tag_options').on('mouseenter mouseleave','.tag_option', function(event){
    if(event.type == 'mouseenter'){
        alert('entering');
    }
    if(event.type == 'mouseleave'){
        alert('leaving');
    }
});

Answer 4

Other syntax possible, more readable IMO:

$('#tag_options').on({
    mouseenter:function(){/**/},
    mouseleave:function(){/**/}
},'.tag_option');

Answer 5

有一个mouseover事件可以监听：

$('#tag_options').on("mouseover", ".tag_option", function(event) {   
    alert('hello world!');
});

jsFiddle