[英]Dynamically changing HTML text breaks jquery script
我的網站上有HTML的一部分,當用戶進行選擇時,HTML文本的各個方面都會改變。
含義-當用戶在某個復選框上進行選擇時,指定div
某些文本將被修改。
但是,無論何時修改HTML,我都無法執行腳本。 此DIV中的相關ID和類保持不變,而其他未觸動的HTML也會很好地觸發腳本。 在對HTML進行編程更改后,使它不觸發腳本又是什么呢?
我指的代碼是:
<input type='checkbox' id='switch'>Switch text
<div id="example">
<input type='checkbox' class='trigger' id='box1'>Text Text AAA
<input type='checkbox' class='trigger' id='box2'>Text Text AAA
<input type='checkbox' class='trigger' id='box3'>Text Text AAA</div>
JS
$('#switch').change(function () {
if ($('#switch').is(':checked')) {
var str = $('#example').html().replace(/AAA/g, 'Hello');
$('#example').html(str);
}
});
$('.trigger').change(function () {
if ($(this).is(':checked')) {
alert('It worked');
}
});
小提琴: http : //jsfiddle.net/L82r45ob/
當您將HTML替換為html
方法時:
var str = $('#example').html().replace(/AAA/g, 'Hello');
$('#example').html(str);
它刪除所有綁定的事件處理程序。 因此,問題。
改用事件委托:
$('#example').on('change', '.trigger', function () {
if ($(this).is(':checked')) {
alert('It worked');
}
});
在這種情況下,您將事件附加到永不改變的#example
div上,因此您將從事件冒泡DOM樹中受益。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.