jQuery中on方法绑定mouseover等事件对新创建元素无效的问题

嘿，我太懂你这种明明照着方法做却没效果的憋屈感了！虽然你用了on方法，但问题出在绑定时机和绑定对象上——你直接把事件绑定到了还没被添加到DOM里的动态元素上，这时候jQuery根本找不到这些元素，自然没法把事件绑上去。

问题根源 #

当你执行$(".js_is_a_broken_time_wasting_piece_of_garbage").on(...)的时候，那个带js_is_a_broken_time_wasting_piece_of_garbage类的图片元素还没被append到页面里呢，所以这个选择器返回的是空集合，事件也就白绑了。

正确解法：事件委托（Event Delegation） #

你需要把事件绑定到一个页面加载时就已经存在的父元素上，然后通过指定子元素选择器来“委托”处理事件。这样不管子元素是现在有还是之后动态添加的，只要事件冒泡到父元素，jQuery就会帮你检查并触发对应的处理函数。

针对你的代码，修改后的事件绑定应该是这样的：

// 保留你添加元素的代码
$("#vorschau_tr").append('<td><img src="bla.jpg" class="flipped js_is_a_broken_time_wasting_piece_of_garbage"></td>');

// 修改事件绑定，用父元素#vorschau_tr来委托
$("#vorschau_tr").on({
  mouseover: function () {
    alert('enter');
  },
  mouseleave:function () {
    alert('leave');
  }
}, ".js_is_a_broken_time_wasting_piece_of_garbage"); // 这里指定目标子元素的选择器

额外提示 #

如果#vorschau_tr本身也是动态生成的，那你就得找更上层的、肯定存在的父元素，比如document或者body，但尽量选择离目标元素最近的稳定父元素，这样性能会更好。比如：

$(document).on({
  mouseover: function () {
    alert('enter');
  },
  mouseleave:function () {
    alert('leave');
  }
}, ".js_is_a_broken_time_wasting_piece_of_garbage");

这样调整之后，你的鼠标悬停事件应该就能正常触发啦！

内容的提问来源于stack exchange，提问作者Eddy Unruh