無法在動態創建的html按鈕上執行javascript

因此，我對javascript/jquery很新穎，所以我需要一些幫助。這是問題所在。我有一個頁面，其中一個按鈕觸發一個jQuery動畫來顯示登錄表單（它只是替換之前的html代碼）在登錄表單上我動態創建一個按鈕來隱藏登錄表單，並顯示原始的HTML。但該按鈕無法通過.click方法調用，或者即使OnClick屬性不起作用！任何建議？無法在動態創建的html按鈕上執行javascript

$(document).ready(function() { 
$("#login_button").click(function() { 
$("#menu").animate({height: "toggle"}, 500, function() { 
$("#menu").empty(); 
$("#menu").append('<button id="back_button"></button>'); 
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false}); 
}); 
}); 
});

，然後將該偵聽「back_button」的代碼，請點擊：

$(document).ready(function() { 
$("#back_button").click(function() { 
$("#menu").animate({height: "toggle"}, 500, function() { 
$("#menu").append(//Regular HTML); 
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false}); 
}); 
}); 
});

也可以javascript不是一個元素上執行產生我的另一個JavaScript？任何想法都會很棒！提前致謝！

來源

2013-05-10 user2371433

您是否嘗試過搜索它？ http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements#answer-9331127 – thebreiflabb 2013-05-10 20:55:00

是的，它可以在由另一個腳本生成的元素上執行，但是，您必須首先等待所述元素在綁定事件之前存在，或者通過將事件綁定到所述元素（如文檔）的父項來利用事件委託。 http://learn.jquery.com/events/event-delegation/ – 2013-05-10 20:55:35

變化從你的背部BUTTOM代碼：

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

到

$(document).on('click', "#back_button", function() {

如果動態地創建元素，你需要使用jQuery的.on()功能。

事件處理程序僅綁定到當前選定的元素;在代碼調用.on（）時，頁面上必須存在。要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件綁定。如果新頁面被注入頁面，選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲。

來源

2013-05-10 20:54:59 j08691

綁定到更接近元素的位置，以便jQuery不必決定是否要爲每個冒出來的事件調用回調函數。 – Brad 2013-05-10 20:57:47

是的，只要有可能就綁定到最近的現有元素。「在文檔樹頂部附近附加許多委託事件處理程序會降低性能，每次事件發生時，jQuery都必須將該類型的所有附加事件的所有選擇器與從事件目標直到頂部的每個元素進行比較文檔**爲了獲得最佳性能，請將文檔位置的委託事件附加到儘可能靠近目標元素的位置**避免在大型文檔上過度使用文檔或document.body來委派事件。 – j08691 2013-05-10 21:00:06

您嘗試在加載時添加點擊處理程序，但<button>尚未創建。在創建按鈕的同一代碼中添加點擊功能。

來源

2013-05-10 20:54:47 Adrian

@AdamD這正是我所說的，你在說什麼？ – Adrian 2013-05-10 20:55:40

這是怎麼回事？這是解決問題的完美方式，根據具體情況可能會更好地表現出性能。 – Brad 2013-05-10 20:55:50

的確，這是正確的，我可能會用另一種解決方案，但它是完全有效的。 – thebreiflabb 2013-05-10 20:56:57

你需要事件代表團

$(document).on('click', '#back_button', function() { 
    // do your stuff here 
});

http://api.jquery.com/on/

來源

2013-05-10 20:55:43

這正在發生，因爲執行的後退按鈕的JavaScript時，實際的元素不存在。使用.on來綁定click事件。

$(document).on("click", "#back_button", function() {});

來源

2013-05-10 20:55:45

無法在動態創建的html按鈕上執行javascript

回答

相關問題