<body>
<button id="new">new</button>
<h3>testH3</h3>
<script>
$(function () {
$('h3').click(function () {
alert($(this).text());
});
$('#new').click(function () {
$.getJSON("/app3/testajax/", null, function (result) {
let $body = $('h3').parent();
let $new = $('<h3></h3>');
$new.text('new added');
$body.append($new);
});
});
});
</script>
<body>有一个h3标签，在点击的时候可以弹出h3的内容；
有一个button，每按一次会新增一个h3标签；
但是问题是点击button新增的h3标签不会触发click事件，只有原有点击原有的h3会触发click事件。
为了解决这个问题我把代码改成了这样
<script>
$(function () {
$('#new').click(function () {
$.getJSON("/app3/testajax/", null, function (result) {
let $body = $('h3').parent();
let $new = $('<h3></h3>');
$new.text('new added');
$body.append($new);
$('h3').click(function () {
alert($(this).text());
})
});
});
});
</script>虽然开始的问题解决了，但是出现了新问题，每多新增一个h3，点击h3的时候会多次触发click事件，请大神帮忙这个怎么解决
$(function () {
$('h3').click(function () {
alert($(this).text());
})
$('#new').click(function () {
$.getJSON("/app3/testajax/", null, function (result) {
let $body = $('h3').parent();
let $new = $('<h3></h3>');
$new.text('new added');
$new.click(function () {
alert($(this).text());
})
$body.append($new);
});
});
});
$('h3').off().on("click",function () { alert($(this).text()); })或者用事件委托$(function () {
$('body').on("click","h3",function () { alert($(this).text()); })
})
肯定啊 这个触发的次数是n*n次，事件重复绑定啦