Js为Dom元素绑定事件须知

浏览数：275 / 时间：2015年06月09日

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定：

$(‘body‘).load(‘LearnClickBinding.ashx‘);
$(‘a‘).click(function () {
	alert(‘I was clicked!‘);
});

上面的绑定是无效的，因为异步加载需要时间，而在获取元素之前，早已执行了$(‘a‘).click();方法，所以绑定失败。

正确的做法是，等待元素加载完后再执行 $(‘a‘).click();

$(‘body‘).load(‘LearnClickBinding.ashx‘, function () {
	$(‘a‘).click(function () {
		alert(‘I was clicked!‘);
	});

});

Js为Dom元素绑定事件只能在页面刷新之前，也就是该Dom元素重新加载之前有效。尤其是在异步加载Dom元素的时候，就有这个问题。

$(‘body‘).load(‘LearnClickBinding.ashx‘, function () {
	$(‘a‘).click(function () {
　　　　　　alert(‘I was clicked!‘);
	});

	$(‘body‘).empty();

	$("<a href=‘#‘>Click Me!</a>").appendTo(‘body‘);
});

这种绑定方式也是失败的，因为绑定事件的a元素已经被empty了，后面append的a元素是没有事件的，所以点击按钮依然没有效果。

正确的绑定方法：

$(‘body‘).load(‘LearnClickBinding.ashx‘, function () {
	$(‘a‘).click(function () {
		alert(‘I was clicked!‘);
	});

	$(‘body‘).empty();

	$("<a href=‘#‘>Click Me!</a>").appendTo(‘body‘);

	$(‘a‘).click(function () {
		alert(‘I was clicked!‘);
	});
});

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Js为Dom元素绑定事件须知