jquery 之干净的事件绑定（分离逐一dom元素绑定）

最新推荐文章于 2023-08-08 00:50:48 发布

原创最新推荐文章于 2023-08-08 00:50:48 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

Js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种改进的JS代码实现方式，用于管理关键字列表，包括添加、删除、修改关键字的操作，避免了页面刷新，并使后续操作更加便捷。

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

在写js代码时往往会遇到这样的问题, 举个例子: 让你实现如下一个功能模块；

要求：1. 每次添加新关键字页面不许刷新

2. 新加的关键字确保配置，删出，修改可用（即后面的蓝色按钮可用）

<div class="panel-body">
    <div class="list-group" id="keyword-list-group">
		<a href="#" class="list-group-item">
			<span class="badge delete-keyword"><i class="fa fa-trash-o"></i></span>
			<span class="badge edit-keyword"><i class="fa fa-edit"></i></span>
			<span class="badge edit-reply-keyword-info"><i class="fa fa-credit-card"></i></span>
			00
		</a>

		<a href="#" class="list-group-item">
			<span class="badge delete-keyword"><i class="fa fa-trash-o"></i></span>
			<span class="badge edit-keyword"><i class="fa fa-edit"></i></span>
			<span class="badge edit-reply-keyword-info"><i class="fa fa-credit-card"></i></span>
			阅读
		</a>
	</div>
    <hr>
    <div class="add-keyword">
		<a id="add-keyword-btn"><i class="fa fa-plus"></i> 添加关键字</a>
    </div>
</div>

以前的写法是每当产生一个新的 "<a href="#" class="list-group-item">...</a>" 之后呢在给其内部的三个按钮绑定事件，类似与这样如下写法：

$("#keyword-list-group").append("<a href="#" class="list-group-item">...</a>");
bindMenuEvent();

现在有更好的写法如下：

//将事件绑定在更外层上利用事件冒泡原理让你不必没心append一个"<a href="#" class="list-group-item">...</a>" 之后再调用绑定事件的方法逐一绑定
//例如给所有删除按钮（包括新产生的）绑定事件
$("#keyword-list-group").on("click", "delete-keyword", function() {
	......
});