jquery裏面的動態生成的html功能不起作用

我擡頭看了load方法找到php的替代方案。我得到了負載來動態添加html，它的工作原理。但是，一個問題是該功能無法正常工作。我認爲這可能是訂單問題，結構問題或純邏輯。任何幫助讓我的函數在動態生成的html中工作將不勝感激。下面的示例結構。jquery裏面的動態生成的html功能不起作用

$(document).ready(function() { 
    "use strict"; 

    $("header").load("/_includes/header.html"); 

}); 

$(window).bind("load", function() { 
    "use strict"; 

    $('.class').click(function() { 
     $('#id').slideToggle('fast'); 
    }); 
});

來源

2015-09-02 riotgear

我的印象中，你將不得不使用'委託events'這裏... –

對不起，我不明白。 – riotgear

看看[這個線程]（http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on） –

如果你裏面header.html定義.class元素，那麼你需要使用event delegation如下：

$(document).on('click','.class',function() { 
     $('#id').slideToggle('fast'); 
});

事件委託應在其上添加控件使用DOM在稍後的部分或在DOM被加載後。

UPDATE

當您直接連接事件元素象下面這樣：

$('.element').click(function(){ 
.... 
});

或如下：

$('.element').on('click',function(){ 
.... 
});

這些事件不會得到重視到d在加載之後增加的元素或元素。所以，你需要重視event要麼document靶向DOM特別element如下：

$(document).on('click','.element',function(){ 
    ... 
});

，或者這是頁面加載過程中加載其父。對於防爆：

假設你有如下結構：

<div class="somediv"> 
    <!--Many other children elements here--> 
</div>

現在，你要麼通過append或load或任何其他可能的方式和結構添加一個事件將成爲如下：

<div class="somediv"> 
    <!--Many other children elements here--> 
    <button class="element">Click here<button> <!--This is dynamically added element --> 
</div>

現在您可以將事件附加到.somediv而不是附加到document，因爲它在DOM加載期間添加並且新添加的元素將在此內。

這實際上將提高代碼的性能，你是明確告訴從哪裏開始jquery搜索的動態添加.element和jquery可以搜索它來得更快，而不是從document

遍歷

所以你可以把它寫成如下：

$('.somediv').on('click','.element',function(){ 
//^^^^parent div   ^^^dynamically added element 
    //do anything here 
});

來源

2015-09-02 13:10:45

我可以用addClass和removeClass來做到這一點嗎？最後，你能告訴我爲什麼我有並不總是工作？我真的想明白爲什麼這不起作用。 – riotgear

謝謝我認爲這是有道理的。我今晚會嘗試。我可以在一個JavaScript文件中使用多個$（文檔）嗎？另外，代表團在JavaScript（開始，中間，結束等）中的位置是否重要... – riotgear

@ user3174713您可以使用多個'$（document）'執行'事件委託'.. –

試試這個

$(document).ready(function() { 
    "use strict"; 

    $("header").load("/_includes/header.html", function() { 
     $('.class').click(function() { 
      $('#id').slideToggle('fast'); 
     }); 
    }); 
});

來源

2015-09-02 13:13:00

使用.live（）對老年人的jQuery版本

$(".class").live("click", function() { 
    $('#id').slideToggle('fast'); 
});

老年

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+

來源

2015-09-02 13:13:33 sajanyamaha

哪個更好.live或$（文檔）???還有什麼區別？ – riotgear

jquery裏面的動態生成的html功能不起作用

回答

相關問題