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