jQuery選擇動態創建的html元素

Question

我的這個問題有很多問題與幾乎相似的標題，但你知道我沒有找到答案。

我的簡單問題是：我有按鈕，當我點擊它時，javascript會創建模態窗口

<div class="aui-dialog">
     html here... 
     <button id="closeButton">Close</button>
</div>

就在<body>標簽之后。

我可以使用jQuery live綁定關閉按鈕的click事件沒有問題：

$("#closeButton").live("click", function() { 
    alert("asdf"); // it calls
    $("body").find(".aui-dialog").remove();
});

我的問題是 ，我無法通過其類名選擇動態創建的模態窗口div。 這樣我就可以調用jQuery .remove（）方法來進行關閉操作。 現在我知道，我必須以另一種方式處理動態元素。

有什么辦法？

編輯：
我認為重要的是要提到這一點：
我不自己創建模態窗口，我使用liferay門戶。 它有內置的javascript框架AUI （ YUI ），可以創建該模態窗口。 我可以在它的視圖中創建它內部的關閉按鈕。

編輯2：
模態窗口div類屬性值為：“ aui-component aui-panel aui-dialog aui-widget-located ”

Answer 1

~~在創建模態窗口時創建引用：~~

var modalWindow = $('<div class="aui-dialog">html here... <button id="closeButton">Close</button></div>');
// later...
modalWindow.remove();

要編輯：

當按鈕位於模態窗口內時，通過jQuery的parent獲取窗口：

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});

Answer 2

由於jquery將在頁面加載時讀取當前的DOM狀態：

jQuery( document ).ready(function( $ ) {

它將錯過您在頁面加載后生成的元素。

一個簡單的解決方案是監聽文檔的點擊，並使用您要用來執行代碼的類或元素類型進行過濾。 這樣，jquery會在頁面加載后找到在文檔下生成的新元素。

$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});

Answer 3

你可以做一些事情，但首先，如果你使用的是jQuery 1.7，最好使用.on() 。 它已經取代了已棄用的.live() 。

如果你無法控制模態的構建，但知道按鈕是模態的直接子項，那么使用parent()

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});

如果按鈕位於父級深處但與父級具有固定深度，則使用parents()獲取元素的所有祖先，然后將其過濾到特定深度。 如果收盤價為2級，則指數為:eq()為1。

$('#closeButton').on('click',function() {
    //where N is zero-indexed integer, meaning first item of the set starts with 0
    $(this).parents(':eq(N)').remove(); 
    return false;
});

另一種方法是在創建模態時添加處理程序

var modal = $('modalHTML');

$('#closeButton',modal).on('click',function(){
    //modal still refers to the whole modal html in this scope
    modal.remove();
});

//show modal

Answer 4

許多用戶在想要通過JQuery選擇一些生成的運行時元素時會出現在這個頁面上，並且它失敗了，就像我一樣。
解決方案只是接近隨機生成元素的根（父），然后通過jQuery TAG選擇獲得內部。 例如，您在運行時在表中生成許多用戶的TD，具有您的用戶列表的元素是具有id tblUsers的表，然后您可以迭代運行時生成的TR或TD，如下所示：

$("#tblUsers tr").each(function(i){
    alert('td' + i);
});

如果你有tds的輸入，你可以深入選擇

$("tblUsers tr td input")

另一種情況可能是隨機生成的對話框或彈出窗口，然后您必須接近其根（父）和下一個相同的選擇，如上所述。

Answer 5

更新：

您可以使用：

$(".aui-dialog").live('click', function() {
    $(this).remove();
    return false;
});)

這將為當前和將來與當前選擇器匹配的所有元素附加事件處理程序。 請注意，此方法在較新版本的jQuery中已棄用，您應該考慮使用.on()而不是.live() 。

Answer 6

我找到了答案，希望對於那些面臨動態生成的帶有IFRAME的 html的開發人員會有所幫助。

如果你在IFRAME中有一個按鈕（#closeButton），並且你想要選擇iframe父窗口的dom元素，只需為你的選擇器添加第二個參數window.parent.document ：

// This functions is inside generated IFRAME
$("#closeButton").on("click", function() {        
       // body - is your main page body tag
       /* Will alert all html with your dynamically 
          generated html with iframe and etc. */
       alert($('body', window.parent.document).html()); 
       return false;
});

jQuery選擇動態創建的html元素

問題描述

6 個解決方案

解決方案1
11 已采納 2012-04-23 12:31:47

解決方案2
8 2014-07-01 16:01:15

解決方案3
3 2012-04-23 12:40:33

解決方案4
3 2014-01-23 14:28:21

解決方案5
0 2012-04-23 12:40:26

解決方案6
0 2012-04-24 08:45:24

jQuery選擇動態創建的html元素

問題描述

6 個解決方案

解決方案1 11 已采納 2012-04-23 12:31:47

解決方案2 8 2014-07-01 16:01:15

解決方案3 3 2012-04-23 12:40:33

解決方案4 3 2014-01-23 14:28:21

解決方案5 0 2012-04-23 12:40:26

解決方案6 0 2012-04-24 08:45:24

解決方案1
11 已采納 2012-04-23 12:31:47

解決方案2
8 2014-07-01 16:01:15

解決方案3
3 2012-04-23 12:40:33

解決方案4
3 2014-01-23 14:28:21

解決方案5
0 2012-04-23 12:40:26

解決方案6
0 2012-04-24 08:45:24