簡體   English   中英

動態更改HTML文本會破壞jquery腳本

[英]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樹中受益。

演示: http//jsfiddle.net/L82r45ob/1/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM