jquery html动态添加的元素绑定事件详解

当您使用 jQuery 向 DOM 中添加新元素时，这些元素需要相应的事件处理程序来响应用户的交互。为动态添加的元素绑定事件处理程序，可以使用 jQuery 的 on() 方法。例如，以下代码会为在父元素 div 中动态添加的子元素 span 绑定点击事件处理程序：

$('div').on('click', 'span', function() {
  // 点击事件处理程序
});

在这个例子中，on() 方法传递三个参数。第一个参数是事件类型，例如 'click'。第二个参数是一个选择器，它指定要绑定事件处理程序的元素，例如 'span'。第三个参数是事件处理程序函数。关键是第二个参数，它指定了要绑定事件处理程序的元素，这个元素可能是动态添加的，因此在添加到 DOM 的时候可能还不存在。但是，当使用 on() 方法时，jQuery 会在父元素 div 上绑定事件处理程序，然后根据选择器 'span' 来过滤出真正的目标元素并触发事件处理程序。这种技术称为“事件委托”，它可以帮助我们在动态添加元素时避免频繁绑定和解绑事件处理程序的问题。

相关问题

jquery源码逐行详解

jQuery 是一个非常流行的 JavaScript 库，它简化了 JavaScript 代码的编写和操作 DOM 的过程。以下是 jQuery 源码的逐行详解：

(function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {
		// 如果是 CommonJS 规范，则添加到模块中
		// 在 Node.js 环境中，module 对象代表当前模块，exports 对象是 module 的属性，用于指定模块对外输出的接口。
		// 通过 exports 对象把模块导出，其他文件就可以通过 require() 函数来引用该模块。
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		// 如果是浏览器环境，则将 jQuery 添加到全局对象 window 中
		factory( global );
	}

// 在这里传入了两个参数，global 和 factory，分别表示全局对象和一个工厂函数

}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

	"use strict";

	var deletedIds = [];

	var document = window.document;

	var slice = deletedIds.slice;

	var concat = deletedIds.concat;

	var push = deletedIds.push;

	var indexOf = deletedIds.indexOf;
  // ...

这段代码定义了一个立即执行函数，其目的是为了防止变量污染全局作用域。如果是在 Node.js 环境中，那么需要将 jQuery 添加到模块中，否则将 jQuery 添加到全局对象 window 中。然后定义了一些变量，包括 deletedIds、document、slice、concat、push 和 indexOf 等。这些变量都是为了后面的代码服务。

var version = "3.6.0",

	// 定义了一个空函数
	jQuery = function( selector, context ) {

		return new jQuery.fn.init( selector, context );
	},

	// ...

这里定义了 jQuery 的版本号和 jQuery 函数。jQuery 函数是一个工厂函数，用于创建 jQuery 对象，其实现是通过调用 jQuery.fn.init 函数实现的。

jQuery.fn = jQuery.prototype = {
	// jQuery 对象的方法和属性
};

jQuery.fn.init.prototype = jQuery.fn;

这里定义了 jQuery 对象的原型，包括 jQuery.fn 和 jQuery.prototype。jQuery.fn 和 jQuery.prototype 是等价的，都是为了扩展 jQuery 对象的方法和属性。同时还将 jQuery.fn.init 的原型指向了 jQuery.fn，这样可以让 jQuery.fn.init 实例化出来的对象拥有 jQuery.fn 的方法和属性。

jQuery.extend = jQuery.fn.extend = function() {
	// ...
};

jQuery.extend({

	// 一些静态方法和属性
});

jQuery.fn.extend({

	// 一些实例方法和属性
});

这里定义了 jQuery 的 extend 方法，用于实现对象的合并。同时还定义了一些静态方法和属性，以及一些实例方法和属性。

jQuery.expr = {
	// ...
};

jQuery.expr[ ":" ] = {
	// ...
};

这里定义了 jQuery 的表达式引擎，用于实现选择器的解析。其中，jQuery.expr 是一个对象，存储了所有的选择器类型。jQuery.expr[ ":" ] 表示的是伪类选择器。

jQuery.ajax = function( url, options ) {
	// ...
};

jQuery.fn.load = function( url, params, callback ) {
	// ...
};

这里定义了 jQuery 的 ajax 和 load 方法，用于实现异步请求和载入 HTML 片段。

var
	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

	// Map over the $ in case of overwrite
	_$ = window.$;

jQuery.noConflict = function( deep ) {
	// ...
};

if ( typeof noGlobal === "undefined" ) {
	window.jQuery = window.$ = jQuery;
}

这里定义了 jQuery 的 noConflict 方法，用于解决命名冲突问题。同时还保存了 window.jQuery 和 window.$ 的引用，以便在需要时恢复原来的状态。最后，将 jQuery 和 $ 添加到全局对象 window 中。

以上是 jQuery 源码的部分逐行详解，希望能对你有所帮助。

jquery之clone()方法详解

jQuery中的clone()方法用于创建一个元素的副本，包括它的所有属性、子元素以及绑定的事件。

语法：

$(selector).clone(deep, withDataAndEvents)

参数：

- deep：可选。默认为false，表示只复制当前元素，不复制它的所有子孙节点。如果为true，则表示复制当前元素及其所有子孙节点。注意，如果当前元素有子孙节点，设置为true可能导致执行时间变长。
- withDataAndEvents：可选。默认为false，表示新元素不会复制当前元素绑定的事件处理函数和数据。如果为true，则表示新元素会复制当前元素的所有事件处理函数和数据。

示例：

<div id="original">
  <p>这是一个段落。</p>
  <button>点击我</button>
</div>

// 复制元素及其所有子孙节点
var clone = $('#original').clone(true);

// 将副本添加到文档中
$('body').append(clone);

上面的代码会将原始元素`#original`及其所有子孙节点复制一份，并将该副本添加到文档中。

需要注意的是，使用clone()方法复制元素时，如果原始元素有id属性，会导致多个元素拥有相同的id属性，这违反了HTML标准。因此，在复制元素时最好不要复制它们的id属性。

另外，如果原始元素绑定了事件处理函数或者数据，复制后的副本也会继承这些事件处理函数和数据。如果不想继承，需要将withDataAndEvents参数设置为false。