Jquery 动态添加元素并添加点击事件实现过程解析

下面是“JQuery 动态添加元素并添加点击事件实现过程解析”的完整攻略：

1. JQuery 动态添加元素的方法

使用 JQuery 动态添加元素，可以通过以下三种方法：

1.1 .html()方法

.html() 方法可以将文本或 HTML 插入到指定元素中。如果需要动态添加 HTML 元素，该方法可以快速实现。

// 原始 html 结构
<div id="demo"></div> 

// JQuery 代码
$("#demo").html("<p>这是一个动态添加的段落。</p>");

1.2 .append()方法

.append() 方法可以在指定元素结尾添加新的内容，这是一个很好的用于动态添加元素的方法。

// 原始 html 结构
<ul id="myList">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul> 

// JQuery 代码
$("#myList").append("<li>List item 4</li>");

1.3 .prepend()方法

.prepend() 方法可以在指定元素开头添加新的内容，与 .append() 相反。

// 原始 html 结构
<ul id="myList">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul> 

// JQuery 代码
$("#myList").prepend("<li>List item 0</li>");

2. 为动态添加元素添加点击事件

如果按照上述方法动态添加元素，则它们不会绑定在文档对象模型 (DOM) 上，这意味着它们没有可以侦听的事件。要在动态添加的元素上添加点击事件，可以使用以下方法：

2.1 通过 .on() 方法添加事件

在添加新元素之前，使用 .on() 方法在文档对象模型 (DOM) 上添加事件监听，然后将新元素添加到页面上。这样新元素也将受到事件的监听。

// 原始 html 结构
<button id="addButton">Add new button</button>
<div id="buttonContainer"></div> 

// JQuery 代码
$("#addButton").on("click", function() {
  $("#buttonContainer").append("<button class='newButton'>New Button</button>");
});

$("#buttonContainer").on("click", ".newButton", function() {
  alert("You clicked a new button!");
});

在上述示例代码中，通过为添加按钮的点击事件添加一个回调函数来添加新的按钮。新的按钮添加到名为 #buttonContainer 的 div 元素中。然后，使用 .on() 方法在该元素上添加了一个点击事件。这使得在这个 div 内部添加新按钮后，它们也会受到 click 事件的监听。

2.2 通过 .delegate() 方法添加事件

类似于 .on() 方法，您还可以使用 .delegate() 方法动态添加事件，如下所示：

// 原始 html 结构
<button id="addButton">Add new button</button>
<div id="buttonContainer"></div> 

// JQuery 代码
$("#addButton").on("click", function() {
  $("#buttonContainer").append("<button class='newButton'>New Button</button>");
});

$("#buttonContainer").delegate(".newButton", "click", function() {
  alert("You clicked a new button!");
});

在这个示例代码中，通过为添加按钮的点击事件添加一个回调函数来添加新的按钮。 新的按钮添加到名为 #buttonContainer 的 div 元素中。然后，使用 .delegate() 方法在该元素上添加了一个点击事件。这使得新添加的按钮受到监听。

总结它们两条示例：

// 示例1
$("#myList").append("<li><a href=''>new item</a></li>");
$("#myList").on("click", "a", function() {
  alert("Click on a new item");
});

// 示例2
$("#myList").append("<li><a href=''>new item</a></li>");
$("#myList").delegate("a", "click", function() {
  alert("Click on a new item");
});

以上两个示例都是向一个列表中动态添加一个项目，并绑定一个点击事件。您可以根据需要选择适合您项目的解决方案。

希望这个攻略对你有所帮助。