<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事件,请大神帮忙这个怎么解决