Alm*_*bek 13 javascript jquery jquery-selectors dynamically-generated
我的这个问题有很多问题与几乎相似的标题,但你知道我没有找到答案.
我的简单问题是:我有按钮,当我点击它时,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 "
bin*_*ous 11
在创建模态窗口时创建引用:
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;
});
由于jquery将在页面加载时读取当前的DOM状态:
jQuery( document ).ready(function( $ ) {
它将错过您在页面加载后生成的元素.
一个简单的解决方案是监听文档的点击,并使用您要用来执行代码的类或元素类型进行过滤.这样,jquery会在页面加载后找到在文档下生成的新元素.
$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});
当许多用户想要选择由 JQuery 运行时生成的某些元素但失败时，他们会进入此页面，就像我一样。
解决方案是简单地接近随机生成的元素的根（父元素），然后通过jQuery 标签选择获取内部元素。例如，您在运行时在表中生成许多用户的 TD，具有用户列表的元素是 id 为 tblUsers 的表，然后您可以迭代运行时生成的 TR 或 TD，如下所示：
$("#tblUsers tr").each(function(i){
alert('td' + i);
});
此外，如果您在 tds 中有输入，您可以深入选择
$("tblUsers tr td input")
另一种情况可能是随机生成的对话框或弹出窗口，然后您必须接近其根（父级）并通过标签进行下一个相同的选择，如上所述。