jQuery單擊事件不會觸發'已加載'html

Question

我想了解爲什麼加載html到div區塊呈現其類語句有效地不存在到單擊事件。

我的HTML代碼如下所示：

<div id="load-to"> 
</div> 

<div id="load-from"> 
    <div class="load-from-css"> Hello!</div> 
</div> 

<button>load it!</button> 

我的JavaScript代碼如下所示：

$('button').click(function(){ 
     var html = $('#load-from').html(); 
     $('#load-to').html(html); 
    }); 

    $('.load-from-css').click(function(){ 
     alert('clicked'); 
    }); 

當我點擊按鈕，從下DIV塊中的HTML被加載到上格塊，然後html看起來像這樣：

<div id="load-to"> 
    <div class="load-from-css"> Hello!</div> 
</div> 

<div id="load-from"> 
    <div class="load-from-css"> Hello!</div> 
</div> 

我的問題是，爲什麼第二個cli ck事件（在我的jQuery代碼中定義）僅適用於原來的較低的「Hello！」 div塊，但不是在加載的上一個，當兩個具有相同的類定義？

Answer 1

其他答案已經涵蓋了核心原因您的問題（即複製元素的HTML，並把它在其他地方將創造一個全新的DOM元素，並不會複製被綁定到任何事件原始元素......請記住，添加事件偵聽器時，它只會綁定到當時存在的任何元素）

但是，我想添加一些其他選項來完成您想做。

jQuery有幾個不同的技術，使這樣的事情很簡單：

.clone()將主要做你現在正在做*同樣的事情，它會複製HTML內容，並創建一個新的DOM元素。但是，如果您通過true（即：.clone(true)），它將克隆所有數據和事件。

*注意，要真正得到相同的結果作爲使用.html()，你需要做的.children().clone()，否則你會得到雙方的內部和外部div ..這可能是也可能不是必要根據使用情況

例如：https://jsfiddle.net/Lx0973gc/1/

此外，如果你在這個同樣的情況，但沒有想拍的克隆，只是想一個元素從一個地方移動到另一個，有一個名爲.detach()另一種方法這將刪除使用DOM中的元素，但保留所有數據和事件，以便在稍後以相同狀態重新插入它。

例如：https://jsfiddle.net/Lx0973gc/2/（不是最好的例子，因爲你不會看到它移到任何地方，但它這樣做！）

作爲另一種選擇，你可以使用委派事件綁定，這實際上結合將事件不同的元素（父），你知道會不會發生變化，但仍允許你把它定位的子元素：

$('body').on({ 
    'click': function() { 
    alert('clicked'); 
    } 
}, '.load-from-css'); 

例如：https://jsfiddle.net/Lx0973gc/4/

Answer 2

$('.load-from-css')找到當前存在的所有元素，並且.click(...)將偵聽器附加到所有這些元素。這是執行一次。

然後你複製原始的html不傳輸任何偵聽器。 DOM具有監聽器所連接的節點，但是當您複製純HTML時，基本上會根據html創建新節點。

Answer 3

因爲您只複製HTML。 js文件在開始的時候被加載，當時只有一個div實例帶有「load-from-css」類。在複製html之後，您應該再次執行添加偵聽器的代碼。 Somethinglike：

$('button').click(function(){ 
    var html = $('#load-from').html(); 
    $('#load-to').html(html); 

    $('.load-from-css').click(function(){ 
     alert('clicked'); 
    }); 

}); 

Answer 4

僅僅是因爲頁面沒有刷新。您在不加載頁面的情況下將內容加載到其他內容，並且瀏覽器不會識別添加到加載元素的任何事件。

你應該做的是加載你的JavaScript標籤與負載一起的內容。

您的代碼應該是這樣的：

<div id="load-to"> 
    <div class="load-from-css"> Hello!</div> 
</div> 

<div id="load-from"> 
    <div class="load-from-css"> Hello!</div> 
    <script>$('button').click(function(){ 
     var html = $('#load-from').html(); 
     $('#load-to').html(html); 
    }); 

    $('.load-from-css').click(function(){ 
     alert('clicked'); 
    });</script> 
</div> 

Answer 5

#load-to內HTML最初是空的。因此只爲#load-from .load-from-css添加了點擊監聽器。動態綁定元素不會附加點擊偵聽器。

jQuery新版本還具有爲動態元素附加事件的功能。試試這個

$('button').click(function(){ 
     var html = $('#load-from').html(); 
     $('#load-to').html(html); 
    }); 

    $(document).on('click', '.load-from-css', function(){ 
     alert('clicked'); 
    }); 

同時，我們也可以使用這樣

$(document).delegate("load-from-css", "click", function() { 
    alert("Clicked!"); // jQuery 1.4.3+ 
});