的 DEMO

Question

实际上我有一个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');
    });
});

基本上我想要一个页面，只要有人点击＆＃34;添加新的Hello＆＃34;按钮，＃intrall div应该在endoverall之前插入，也可以按照jQuery插入，每当有人点击新插入的hello时，它应该给出一个警告。

我在这里给出的代码正在工作并添加#overall div，但警报无效。

Answer 1

@ahren总结了一切，我只是要提供更多的信息。

1）你不能让id重复多次。 id仅对每个元素都是唯一的，因此我们使用类来执行：

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

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

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

<强> DEMO

Answer 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');
});

如何影响jQuery在运行时插入的HTML代码？

2 个答案:

的 DEMO