Php .dialog不使用AJAX注入的HTML

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

摘要：通过Ajax注入的HTML表单不适用于jQueryUI对话框小部件

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

问题：jQueryUI.dialog没有出现。但是，如果在jQuery中注释掉ajax块并重命名HTML中的第二个div（将id=“editThisContact\u 2”更改为id=“editThisContact\u 1”），所有这些都可以工作

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

我正在尝试创建这个谜题的JSFIDLE示例。这也不是什么好运气。这是一个在JSFIDLE中模拟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=
编辑的联系信息

名字：姓氏：




电子邮件：手机：

';
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>

$（函数（）{
var pih=$（“#在此处输入”）；
点击（函数（）{
fn=$（'#fn_1'）.val（）；
ln=$（'#ln_1'）.val（）；
editname=fn+“”+ln；
//在没有ajax注入的情况下进行测试：（即对于“Test2”，证明…）
//从这里发表评论-->*/
$.ajax({
类型：“POST”，
url:“ax_test4.php”，
数据：'user_level=0'，
成功：功能（数据）{
html（数据）；
}
})；//结束ajax
//到这里您必须在成功调用中创建对话框。您当前正在创建对话框，但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

您是否尝试在
成功
回调中打开对话框？好主意！刚刚尝试过，但没有乐趣。不过，感谢您的想法。您是对的，这解决了问题。我认为在成功调用中打开对话框（如安德鲁·惠特克所建议的那样）有道理，但那不起作用…等等，我现在明白了…当jQuery代码执行并尝试选择ID#editThisContact_1时，div还不存在b/c ajax还没有注入它。您的逻辑是准确的。您带来了解决方案和理解。谢谢您，Umair。
$.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