Javascript 动态DOM和jQuery

我用jQuery打开了一个ajax模式窗口。如何更新DOM并使新元素可供jQuery使用？

给窗口一个ID，然后在jQuery中引用它，比如

$（“#modalWindow”）

要访问模式窗口内的元素，请使用相同的表示法：

$（“#modalWindow.whatever”）

---

您可以在

$（）

中放置任何有效的CSS选择器。有关更多帮助，请参阅。

操作DOM后，即可引用其元素：

// add a new div to the body
$('<div id="just_added">').appendTo('body');

// make the new div you just added explode
$('#just_added').explode();

//在正文中添加一个新的div
$（''）。附于（'正文'）；
//使刚添加的新div爆炸
$（“#刚刚添加”）.explode（）；

这里是一个我拼凑的动态创建jQueryUI模式的工具（我假设这就是您使用的工具-如果没有，请更新您的问题，并提供更多详细信息）

基本上，我正在用JavaScript创建容器和消息/表单：

var theDialog = $("<div id='msg'>");
theDialog.append("<div><label for='txtVal'>Enter a Value:</label><input type='text' id='txtVal'/></div>");

var theDialog=$（“”）；
dialog.append（“输入值：”）；

然后，我使用jQueryUI对话框控件来实例化模式并显示它。我还收集了有关它的信息，并将其传回（某种程度上）父页面

希望这就是你想要做的。如果还有其他问题，请告诉我，我会相应地更新我的答案

希望这有帮助

---

代码
顺便说一句，这不是优化的-它纯粹是为了演示的目的。不要在生产中使用

HTML:

<div id="content">
  <span>Click here for the modal:<button id="openModal">Open</button></span>
  <br/>
  <span>Results:<input id="theResults" type="text" />
</div>​

    $(document).ready(function() {
        $("#openModal").click(function(e) {
            e.preventDefault();
            openDialog();
        });
    });

    function openDialog() {
        var theDialog = $("<div id='msg'>");
        theDialog.append("<div><label for='txtVal'>Enter a Value:</label><input type='text' id='txtVal'/></div>");
        $(theDialog).dialog({
            title: "Sample Dialog",
            modal: true,
            buttons: { "Cancel": function() { 
                                $(this).dialog("destroy"); 
                                $("#msg").remove(); 
                            },
                       "Save": function() { 
                               $("#theResults").empty();
                               $("#theResults").val($("#txtVal").val());
                               $(this).dialog("destroy"); 
                               $("#msg").remove();
                           }
                     }
        });
    }
​

单击此处查看模式：打开


结果：
​

JavaScript:

<div id="content">
  <span>Click here for the modal:<button id="openModal">Open</button></span>
  <br/>
  <span>Results:<input id="theResults" type="text" />
</div>​

    $(document).ready(function() {
        $("#openModal").click(function(e) {
            e.preventDefault();
            openDialog();
        });
    });

    function openDialog() {
        var theDialog = $("<div id='msg'>");
        theDialog.append("<div><label for='txtVal'>Enter a Value:</label><input type='text' id='txtVal'/></div>");
        $(theDialog).dialog({
            title: "Sample Dialog",
            modal: true,
            buttons: { "Cancel": function() { 
                                $(this).dialog("destroy"); 
                                $("#msg").remove(); 
                            },
                       "Save": function() { 
                               $("#theResults").empty();
                               $("#theResults").val($("#txtVal").val());
                               $(this).dialog("destroy"); 
                               $("#msg").remove();
                           }
                     }
        });
    }
​

$（文档）.ready（函数（）{
$（“#OpenModel”）。单击（函数（e）{
e、 预防默认值（）；
openDialog（）；
});
});
函数openDialog（）{
变量对话框=$（“”）；
dialog.append（“输入值：”）；
$（对话框）。对话框({
标题：“示例对话框”，
莫代尔：是的，
按钮：{“取消”：函数（）{
$（此）.dialog（“销毁”）；
$（“#msg”）.remove（）；
},
“保存”：函数（）{
$（“#结果”）.empty（）；
$（“#结果”）.val（$（“#结果”）.val（））；
$（此）.dialog（“销毁”）；
$（“#msg”）.remove（）；
}
}
});
}
​

您必须更加具体。代码有帮助。打开前模式是否存在？打开时是否有回调函数？不，在打开之前，该模式不存在。我还是一个jQuery初学者。。。也许我解释得不对，我说的是模态窗口中的元素。它们是动态的，通过ajax请求生成。只要知道元素的名称，您仍然可以用相同的方式选择它们：

$（“#modalWindow*”）