Question

下面的所有代码都是我想要做的独立工作示例（大大简化）。如果有人将下面的代码块复制/粘贴到3个单独的文件中，则代码完全正常运行 - 只需记住在文档顶部的脚本标记中引用/ include 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

.dialog不使用注入AJAX的HTML

1 个答案: