14

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

我的简单问题是：我有按钮，当我点击它时，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 ”

4

6 回答 6

13

由于 jquery 将在页面加载时读取当前的 DOM 状态：

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

它会错过您在页面加载后生成的元素。

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

$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});
于 2014-07-01T16:01:15.037 回答
12

创建模态窗口时创建参考：

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

对您的编辑：

parent当按钮位于模态窗口内时，通过 jQuery 获取窗口：

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});
于 2012-04-23T12:31:47.067 回答
4

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

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

此外，如果您在 tds 中有输入，则可以深入选择

$("tblUsers tr td input")

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

于 2014-01-23T14:28:21.480 回答
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
于 2012-04-23T12:40:33.017 回答
0

I found an answer, hope it would be helpful for developers who faced with dynamically generated html with IFRAME inside.

If you have a button (#closeButton) inside that IFRAME, and you want select iframe parent window's dom elements, just add second argument window.parent.document for your selector:

// 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;
});
于 2012-04-24T08:45:24.073 回答
0

更新：

您可以使用：

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

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

于 2012-04-23T12:40:26.620 回答