Question

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

Answer 1

给窗口一个ID，并在jQuery中引用它，如$('#modalWindow')。

要访问模态窗口内的元素，请使用相同的表示法：$('#modalWindow .whatever')。

您可以在$()中放置任何有效的CSS选择器。有关更多帮助，请参阅jQuery() documentation。

Answer 2

一旦操作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();

Answer 3

这是一个jsFiddle我放在一起动态创建一个jQueryUI模式（我假设你使用的是 - 如果没有，请更新你的问题，请提供更多相关细节。）

基本上我正在做的是在我的JavaScript中创建我的容器和消息/表单：

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

然后我使用jQuery UI对话框控件来实例化模态并显示它。我也收集有关它的信息并将其传回（父类页面）。

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

希望这有帮助！

<强> CODE
BTW，这不是优化的 - 它纯粹是为了演示目的。不要在生产中使用！

<强> 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>

<强> JavaScript的：

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

动态DOM和jQuery

3 个答案: