如何影响jQuery在运行时插入的HTML代码 - How to affect the HTML code inserted by jQuery on runtime?

How to affect the HTML code inserted by jQuery on runtime?

实际上我有一个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"按钮，#整体div应该在endoverall之前插入，也按照jQuery，每当有人点击新插入的Hello，它应该给它一个警告。

我在这里给出的代码是工作的，并添加了#overalldiv，但警告不起作用

@ahren为你总结了一下，我只会再加一点信息。

1)不能有重复的id。id对每个元素都是唯一的，因此我们使用类，所以您可以这样做:

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

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

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

您的代码生成了具有相同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');
});