如何用新的html替換元素內容而不丟失javascript功能？

Question

我試圖做的是用新的html替換$（'＃product_blocks'）的內容，同時在類似元素id上保留jQuery偵聽器事件。

var thenewhtml= '<div id="clickme">hello this text will be replace on click</div>';

$('#product_blocks').html(thenewhtml);

jQuery事件：

$( "#clickme" ).click(function() {

$("#clickme").html("yayImChanged");

});

但是我的問題是，一旦我用新的html替換#products_block，$（“＃clickme”）將無法正常工作..無法繼續使用新的html ...這就是我要解決的問題。

Answer 1

因為頁面結構看起來相同-只是span的內容已更改-您可以選擇跨度的新內容，並用它替換舊的跨度內容：

 const $userclickedhere = $('#userclickedhere'); $userclickedhere.on('click', () => console.log('click')); const thenewhtml = `<span id="userclickedhere">new data</span>` const newSpanContent = $(thenewhtml).text(); $userclickedhere.text(newSpanContent); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="product_blocks"> <span id="userclickedhere">click me</span> </div> 

這將保留#userclickedhere上的所有偵聽#userclickedhere 。

（當然，您還需要在jQuery集合上使用.html來設置其HTML- .innerHTML是本機DOM元素上的一種方法，這不是一回事）

Answer 2

您可以使用jQuery .on()方法簽名來定義事件處理程序，例如

$(document).on('click', '#userclickedhere', yourClickHandlerFunction);

jQuery .on（）文檔

更新的答案：它仍然可以工作。

$(document).on('click', '#clickme', function(e) {
  $(this).html("yayImChanged");
});

這是一個CodePen演示

Answer 3

您可以使用DOMSubtreeModified ：

 const newHtml = '<div id="clickme">hello this text will be replace on click</div>'; const attachEventClickHandler = () => $('#clickme').one('click', () => { console.log('Clicked...'); $('#product_blocks').html(newHtml); $('#clickme').on('click', () => { console.log('yayImChanged...'); $('#clickme').html('yayImChanged'); }); }); $('#product_blocks').one('DOMSubtreeModified', () => attachEventClickHandler()); attachEventClickHandler(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="product_blocks"> <span id="clickme">click me</span> </div> 

Answer 4

jQuery注冊事件時，它將在DOM中查找該選擇器。 它只會為僅可用的DOM元素注冊事件。

在這里，您要添加thenewhtml，稍后jQuery會注冊事件。 因此，替換HTML后，您必須再次在#clickme上注冊click事件。 在該行之后：$（'＃product_blocks'）。html（thenewhtml）;

這是特定選擇器上jQuery click事件的流程。

但是，還有另一種方法可以在頁面加載時在DOM中不存在的html元素上注冊事件。 即$（document）.on（）方法。

在這里，您可以同時使用兩種方法。 1.替換#product_blocks中的html后，定義點擊事件。 2.在任何地方使用$（document）.on（）定義點擊事件。

$(document).on('click','#clickme',function() {
     /* your code here */
});

要么

$('#product_blocks').html(thenewhtml);
$('#clickme').click(function() {
    $(this).html("yayImChanged");    
});