【问题标题】：How to affect the HTML code inserted by jQuery on runtime?如何影响 jQuery 在运行时插入的 HTML 代码？
【发布时间】：2014-05-11 15:51:19
【问题描述】：

其实我有一个 HTML 和 jQuery 的示例代码：

这是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<script src='jquery.min.js'></script>
<script type='text/javascript' src='try.js'></script>
</head>
<body>

<div id="overall">
<br>hello<br>
</div>

<div id="endoverall"></div>
<input type="button" value="Add new Hello" id="button">

</body>
</html>

还有 jQuery 代码：

$(document).ready(function() {
$('#button').click(function(){
    var content = '<div id="overall"><br>hello<br></div>';
    $('#endoverall').before(content);
});

$('#overall').click(function(){
    alert('hello');
    });
});

基本上，我希望页面中，每当有人点击“添加新的 Hello”按钮时，#overall div 应该在 endoverall 之前插入，并且根据 jQuery，每当有人点击新插入的 hello 时，它应该发出警报它。

我在这里给出的代码可以正常工作并添加#overall div，但警报不起作用。

【问题讨论】：

1) 你不能有多个 ID，使用类。 2) 为动态添加的元素查找事件委托。
stackoverflow.com/questions/22052310/…
@cept0 为什么这是一个糟糕的问题？

标签： php jquery html

【解决方案1】：

@ahren 为您总结了所有内容，我只会提供更多信息。

1) 你不能让ids 重复多个。 id 对每个元素都是唯一的，因此我们使用类，所以你会这样做：

var content = '<div class="overall">

2) 您在页面加载后添加新元素，在这种情况下，新创建的元素没有绑定click 处理程序，因此我们使用.on() 方法添加事件处理程序。

$(document).on('click','.overall',function(){

DEMO

【讨论】：

【解决方案2】：

您的代码生成了多个具有相同 ID 的元素。请记住，每个 ID 都必须是唯一的。
如果所有按钮的功能都相同，请使用相同的类。
您需要使用事件委托才能将click 事件附加到新创建的元素。

例子：

HTML：

<div id="wrapper">
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
    <div class="common"><br>hello<br></div>
</div>

jQuery:

$("#wrapper").on("click", "div.common", function() {
    alert('clicked');
});

DEMO

【讨论】：