jQuery选择动态创建的html元素答案

【问题标题】：jQuery select dynamically created html elementjQuery选择动态创建的html元素
【发布时间】：2012-04-23 12:29:59
【问题描述】：

有很多与我的这个问题标题几乎相似的问题，但你知道我没有找到答案。

我的简单问题是：我有按钮，当我点击它时，javascript 会创建模态窗口

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

就在<body> 标记之后。

我可以使用 jQuery live 毫无问题地绑定关闭按钮的单击事件：

$("#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-positioned”

【问题讨论】：

您如何构建该模式？该按钮相对于模态是否处于固定位置？
可以改模态窗口HTML源代码吗？因为如果是的话，你不能在包装<div> 中添加一个id="modal-window"，然后使用$("#modal-window").remove();吗？
对我来说似乎工作正常FIDDLE ??
@sp00m 我无法创建自己，我使用 liferay 门户，内置的 javascript 框架创建了该模式窗口。我可以在它的视图中创建那个关闭按钮。
@AlmasAdilbek 那么我的$(this).parent().remove(); 解决方案应该可以工作。

标签： javascript jquery jquery-selectors dynamically-generated

【解决方案1】：

因为 jquery 会在页面加载时读取当前的 DOM 状态：

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

它会错过您生成的发布到页面加载的元素。

一个简单的解决方案是监听对文档的点击，并使用您想要用来执行代码的类或元素类型进行过滤。这样 jquery 将在页面加载后找到在文档下生成的新元素。

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

【讨论】：

【解决方案2】：

~~在创建模态窗口时创建一个引用：~~

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;
});

【讨论】：

是的，现在我可以访问关闭按钮的父元素了。但是，模态窗口 div 是 parent().parent().parent()... 如果我提醒这个：alert($(this).parents(".aui-dialog").html())，它会返回 null。
我确信它是这样工作的，但假设模态窗口是动态创建的，它对我不起作用。或者，也许其他原因是因为（查看 EDIT 2 信息）
@AlmasAdilbek 其他类无关紧要。如果 Button 确实在 .aui-dialog 中，它可以工作。也许你应该先检查 DOM 并检查你的按钮是否真的在你的窗口内。
我发现问题的颜色，模态窗口内容是在iframe中生成的。使用 jQuery，我无法使用 parent().parent()... 方式访问 iframe 标记之外的 html 元素。有什么想法吗？
我找到了答案，因为 iframe，我只需要为选择器添加第二个参数 (window.parent.document)：$('body', window.parent.document).find(".aui-dialog").remove();。谢谢

【解决方案3】：

很多用户在想要选择一些由 JQuery 生成的运行时元素时会来到这个页面，但它失败了，就像我一样。
解决方案是简单地接近随机生成元素的根（父），然后通过 jQuery TAG selection 获取内部。例如，您在运行时在一个表中生成了许多用户 TD，具有用户列表的元素是一个 id 为 tblUsers 的表，那么您可以迭代运行时生成的 TR 或 TD，如下所示：

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

如果你在 tds 中有输入，你可以深入选择

$("tblUsers tr td input")

另一种情况可能是随机生成的对话框或弹出窗口，然后您必须通过 TAG 接近其根（父）和下一个相同的选择，如上所述。

【讨论】：

【解决方案4】：

您可以做一些事情，但首先，如果您使用的是 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

【讨论】：

【解决方案5】：

更新：

你可以使用：

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

这会为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。请注意，此方法在较新版本的jQuery 中已被贬值，您应该考虑使用.on() 而不是.live()。

【讨论】：

live 需要一个事件类型。但它甚至已被弃用。
那里有点快 - 我已经编辑了答案。感谢您的评论。

【解决方案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;
});

【讨论】：