动态DOM和jQuery

Question

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

Answer 1

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

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

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

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对话框控件来实例化模态并显示它。 我也收集有关它的信息并将其传回（父类）。

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

希望这可以帮助！

---

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

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