jquery中对动态生成的标签不会响应click事件

时间 2019-11-06

标签 jquery 动态生成标签不会响应 click 事件栏目 JQuery 繁體版

原文原文链接

Jquery中对ajax动态生成的html标签不会响应 $(selector).click(function.. 或者$(selector).bind('click',function.., 须要用.livehtml

jQuery 1.7 开始，再也不建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。ajax

返回值:jQuerylive(type, [data], fn)

概述

jQuery 给全部匹配的元素附加一个事件处理函数，即便这个元素是之后再添加进来的也有效。闭包

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而之后再添加的元素则不会有。为此须要再使用一次 .bind() 才行。好比说app

<body>
  <div class="clickme">Click here</div>
</body>

能够给这个元素绑定一个简单的click事件：函数

$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。而后，想象一下这以后有另外一个元素添加进来了。测试

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也可以匹配选择器 ".clickme" ，可是因为这个元素是在调用 .bind() 以后添加的，因此点击这个元素不会有任何效果。this

.live() 就提供了对应这种状况的方法。若是咱们是这样绑定click事件的：spa

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

而后再添加一个新元素：code

$('body').append('<div class="clickme">Another target</div>');

而后再点击新增的元素，他依然可以触发事件处理函数。orm

事件委托

.live() 方法能对一个尚未添加进DOM的元素有效，是因为使用了事件委托：绑定在祖先元素上的事件处理函数能够对在后代上触发的事件做出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他做为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在咱们的例子中，当点击新的元素后，会依次发生下列步骤：

生成一个click事件传递给 <div> 来处理
因为没有事件处理函数直接绑定在 <div> 上，因此事件冒泡到DOM树上
事件不断冒泡一直到DOM树的根节点，默认状况下上面绑定了这个特殊的事件处理函数。
执行由 .live() 绑定的特殊的 click 事件处理函数。
这个事件处理函数首先检测事件对象的 target 来肯定是否是须要继续。这个测试是经过检测 $(event.target).closest('.clickme') 可否找到匹配的元素来实现的。
若是找到了匹配的元素，那么调用原始的事件处理函数。

因为只有在事件发生时才会在上面的第五步里作测试，所以在任什么时候候添加的元素都可以响应这个事件。

附加说明

.live() 虽然颇有用，但因为其特殊的实现方式，因此不能简单的在任何状况下替换 .bind()。主要的不一样有：

在jQuery 1.4中，.live()方法支持自定义事件，也支持全部的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合适，而且能够冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 并不彻底支持经过DOM遍历的方法找到的元素。取而代之的是，应当老是在一个选择器后面直接使用 .live() 方法，正如前面例子里提到的。
当一个事件处理函数用 .live() 绑定后，要中止执行其余的事件处理函数，那么这个函数必须返回 false。仅仅调用 .stopPropagation() 没法实现这个目的。

参考 .bind() 方法能够得到更多关于事件绑定的信息。

在jQuery 1.4.1中，你能够一次绑定多个事件给 .live() ，跟 .bind() 提供的功能相似。

在jQuery 1.4 中，data参数能够用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包致使的问题。能够参考 .bind() 的讨论来得到更多信息。

参数

typeString

事件类型

data (可选)Object

欲绑定的事件处理函数

fnFunction

欲绑定的事件处理函数

示例

描述:

点击生成的p依然据有一样的功能。

HTML 代码:

<p>Click me!</p>

jQuery 代码:

$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

描述:

阻止默认事件行为和事件冒泡，返回 false

jQuery 代码:

$("a").live("click", function() { return false; });

描述:

仅仅阻止默认事件行为

jQuery 代码:

$("a").live("click", function(event){
  event.preventDefault();
});