Question

我需要为一些动态创建的元素添加一个jquery监听器。我不能为我的生活让这个工作。 tag_options不是动态的，它的子节点是。我尝试了三种方法：

<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 */
  }
});

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>');
});

FIDDLE

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

其他语法可能，更易读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

将jquery侦听器添加到动态创建的元素中

5 个答案: