jQuery on 方法对于网页元素动态绑定好处

最新推荐文章于 2021-04-08 22:47:52 发布

treemer

最新推荐文章于 2021-04-08 22:47:52 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/treemer/article/details/49492629

本文介绍如何使用jQuery的on()方法为动态添加的DOM元素绑定事件处理程序。通过示例展示了传统方法的问题所在，并给出了使用on()方法的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

有的时候我们需要在网页上动态的添加一些网页元素，这个时候如果我们之前写的js不高明，那么这些新天加的元素将不能够绑定那个已有的js事件：

代码示例：

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Test for JQ on function</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <table border="1px">
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
            </tr>
        </thead>
        <tbody id="tbody1">
            <tr>
                <td class="child">1.1</td>
                <td class="child">2.1</td>
            </tr>
        </tbody>
    </table>
    <p>button的功能是添加新的一行。</p>
    <input type="button" value="button" id="funButton">
<script>

$("#funButton").click(function(){
    var trLeng = $("#tbody1").children("tr").length;
    trLeng = trLeng -1;
    $("#tbody1").children("tr").eq(trLeng).after("<tr><td class='child'>2.1</td><td class='child'>2.2</td></tr>");
});
$(".child").click(function(){
    alert($(this).text());
});
</script>
</body>
</html>

js功能描述：

最开始的table是有click事件绑定的，但是如果点击了button添加了新的行，那么新添加的行将不会有click事件触发。所以我们需要改进使用jquery 的on 方法。

修改后的代码：

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Test for JQ on function</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<table border="1px">
		<thead>
			<tr>
				<th>列1</th>
				<th>列2</th>
			</tr>
		</thead>
		<tbody id="tbody1">
			<tr>
				<td class="child">1.1</td>
				<td class="child">2.1</td>
			</tr>
		</tbody>
	</table>
	<p>button的功能是添加新的一行。</p>
	<input type="button" value="button" id="funButton">
<script>

$("#funButton").click(function(){
	var trLeng = $("#tbody1").children("tr").length;
	trLeng = trLeng -1;
	$("#tbody1").children("tr").eq(trLeng).after("<tr><td class='child'>2.1</td><td class='child'>2.2</td></tr>");
});
/*$(".child").click(function(){
	alert($(this).text());
});*/
$("#tbody1").on("click",".child",function(){
	alert($(this).text());
});
</script>
</body>
</html>

代码解释：

对于所有在id值为"tbody1"下的元素且具有class是''child'的元素进行事件绑定。所以即使是新添加的元素也可以有事件效果。