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")

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

Answer 5

<强>更新：

您可以使用：

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

这将为当前和将来与当前选择器匹配的所有元素附加事件处理程序。请注意，此方法在较新版本的jQuery中已弃用，您应考虑使用.on()代替.live()。

Answer 6

我找到了答案，希望对于那些面临动态生成的html且内容为 IFRAME 的开发人员有用。·
如果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 个答案: