Question

下面的所有代码都是我想要做的独立工作示例（大大简化）。如果有人将下面的代码块复制/粘贴到3个单独的文件中，则代码是完全独立的 - 只需记住在文档顶部的脚本标记中引用/包含test5.js和jquery库。

摘要：通过Ajax注入的HTML div未在jQuery UI对话框小部件中打开。

目标：在文档加载时，jquery-ajax注入一个html表单（最终，它将从DB中检索适当的表单值，这是ajax的原因）。使用html注入id =“clickme”的div。单击div应打开对话框。

问题： jQueryUI .dialog没有出现。我在点击事件中放了一个警告框，然后触发。但对话仍然难以捉摸。

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

HTML：index.php

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

JAVASCRIPT / JQUERY：test5.js

$(function() {

    var pih = $('#putit_here');

    $.ajax({
        type: "POST",
        url: "ajax/ax_test5.php",
        data: 'contact_id=1',
        success:function(data){
            pih.html(data);
            var etc1 = $( "#editThisContact_1" );
    /* *****************************************************************
        Moving Dialog up >here< was correct answer.
    ********************************************************************
            etc1.dialog({
                autoOpen: false,
                height: 400,
                width: 600,
                modal: true,
                buttons: {
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    alert('DialogClose fired');
                }
            }); //end .Dialog
    ****************************************************************** */

        }
    }); //End ajax

    /* **** This is where I had it previously ***** */
    etc1.dialog({
        autoOpen: false,
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            alert('DialogClose fired');
        }
    }); //end .Dialog

    $(document).on('click', '#clickme', function(event) {
        alert('HereIAm...');
        $( "#editThisContact_1" ).dialog( "open" );
    }); //End #clickme.click

}); //End document.ready

AJAX - ax_test5.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;

编辑：

更新了在AJAX成功回调中移动对话框定义的问题。但是，没有完全解决问题。如果我将autoOpen标志更改为true，则会出现该对话框，但这不是脚本必须如何工作的。单击（注入）#clickme div。

后，对话框仍然无法打开

编辑2：

我的坏。起初我认为它不起作用，但后来发现我的实时测试和发布的SO问题在一行中变化：如何调用.dialog（“开放”）。在实时代码中，它仍然使用var：etc1.dialog（“open”） - 但在上面的帖子中，选择器被完全引用：$（'＃editThisContact_1'）。dialog（“open”）。发布的语法是正确的。谢谢你们，还有itachi让我来检查镀铬控制台。

Answer 1

您正尝试在元素存在之前初始化元素上的dialog。您的ajax调用成功恢复后，您需要在“＃editThisContact_1”上初始化对话框。

像这样：

.... success:function(data){ pih.html(data); //now your DIV is actually there so init the dialog var etc1 = $( "#editThisContact_1" ); etc1.dialog({ autoOpen: false, height: 400, width: 600, modal: true, buttons: { Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { alert('DialogClose fired'); } }); //end .Dialog }

带有ajax注入的html选择器的jQueryUI Dialog

1 个答案: