.dialog 不适用于 AJAX 注入的 HTML

Question

下面的所有代码都是我正在尝试做的一个独立的工作示例（大大简化）。如果有人将以下代码块复制/粘贴到 3 个单独的文件中，则该代码可以正常运行——只需记住在文档顶部的脚本标签中引用/包含 test4.js 和 jquery 库。

总结： 通过 Ajax 注入的 HTML 表单无法与 jQuery UI 对话框小部件一起使用。

目标： 当点击 div #putit_here 时，jquery-ajax 会注入一个 html 表单（最终，它会从 DB 中检索适当的表单值，这就是 ajax 的原因）。通过 ajax 注入 HTML 后，会出现一个 jQuery .dialog 允许用户修改表单数据并重新提交表单。

问题： jQueryUI .dialog 没有出现。但是，如果注释掉 jQuery 中的 ajax 块 并 重命名 HTML 中的第二个 div（将 id="editThisContact_2" 更改为 id="editThisContact_1"），一切都会起作用。

因此，问题似乎是 HTML 被注入的事实。我错过了什么？

我正在尝试创建这个难题的 jsfiddle 示例，here。对此也没有很大的运气。 See here 是一个在 jsfiddle 中模拟 ajax 调用的好例子。

HTML：index.php

<div id="putit_here">
    Click here
</div>

<!-- ----------------------------------------------------------------------- -->
<!-- *** Below div not req for example. However, to prove the code works *** -->
<!-- *** without the ajax call, RENAME id="editThisContact_2" to _1 and  *** -->
<!-- *** comment-out the ajax block (see embedded notes) in the JS code. *** -->
<!-- ----------------------------------------------------------------------- -->
<div id="editThisContact_2" style="display:none;">
        <p class="instructions">Edit contact information for <span class="editname"></span>.</p>
    <form name="editForm" onsubmit="return false;">
        <fieldset>
<span style="position:relative;left:-95px;">First Name:</span><span style="position:relative;left:10px;">Last Name:</span><br />
        <input type="text" id="fn_1" value="Peter" name="fn_1">
        <input type="text" id="ln_1" value="Rabbit" name="ln_1"><br /><br />
    <span style="position:relative;left:-120px;">Email:</span><span style="position:relative;left:30px;">Cell Phone:</span><br />
        <input type="text" id="em_1" value="pr@warren.nimh.com" name="em_1">
        <input type="text" id="cp_1" value="123-456-7890" name="cp_1">
        </fieldset>
    </form>
</div>

---

AJAX - ax_test4.php

    $rrow = array();
    $rrow['contact_id'] = 1;
    $rrow['first_name'] = 'Peter';
    $rrow['last_name'] = 'Rabbit';
    $rrow['email1'] = 'peter.rabbit@thewarren.nimh.com';
    $rrow['cell_phone'] = '+1.250.555.1212';

    $r = '

    <div id="editThisContact_'.$rrow['contact_id'].'" style="display:none">
            <p class="instructions">Edit contact information for <span class="editname"></span>.</p>
        <form name="editForm" onsubmit="return false;">
            <fieldset>
        <span style="position:relative;left:-95px;">First Name:</span><span style="position:relative;left:10px;">Last Name:</span><br />
            <input type="text" id="fn_'.$rrow['contact_id'].'" value="'.$rrow['first_name'].'" name="fn_'.$rrow['contact_id'].'">
            <input type="text" id="ln_'.$rrow['contact_id'].'" value="'.$rrow['last_name'].'" name="ln_'.$rrow['contact_id'].'"><br /><br />
        <span style="position:relative;left:-120px;">Email:</span><span style="position:relative;left:30px;">Cell Phone:</span><br />
            <input type="text" id="em_'.$rrow['contact_id'].'" value="'.$rrow['email1'].'" name="em_'.$rrow['contact_id'].'">
            <input type="text" id="cp_'.$rrow['contact_id'].'" value="'.$rrow['cell_phone'].'" name="cp_'.$rrow['contact_id'].'">
            </fieldset>
        </form>
    </div>
    ';
    echo $r;

---

JAVASCRIPT/JQUERY：test4.js

<script>

$(function() {

    var pih = $('#putit_here');

    pih.click(function() {

        fn = $('#fn_1').val();
        ln = $('#ln_1').val();
        editname = fn + " " + ln;

//To test without ajax injection: (i.e. for "Test2", the proof...)
//Comment out from here --> */
            $.ajax({
            type: "POST",
            url: "ax_test4.php",
            data: 'user_level=0',
            success:function(data){
                pih.html(data);
            }
        }); //End ajax
//To here <-- */
        $( "#editThisContact_1" ).dialog( "open" );
    }); //End pih.click

    $( "#editThisContact_1" ).dialog({
        autoOpen: false,
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            alert('DialogClose fired');
        }
    });

}); //End document.ready

</script>

Answer 1

您必须在成功调用中创建对话框。当 html 不存在时，您当前正在创建对话框。

$.ajax({
            type: "POST",
            url: "ax_test4.php",
            data: 'user_level=0',
            success:function(data){
                pih.html(data);
           $( "#editThisContact_1" ).dialog({
        autoOpen: false,
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            alert('DialogClose fired');
        }
    });
            }
        }); //End ajax