1

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

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

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

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

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

HTML：索引.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("open")。在实时代码中，它仍在使用 var：etc1.dialog("open")——但在上面的帖子中，选择器被完全引用：$('#editThisContact_1').dialog("open")。发布的语法是正确的。感谢绅士们，还有 itachi 让我检查了 chrome 控制台。

4

1 回答 1

1

您正在尝试dialog在元素存在之前在元素上初始化 a 。在您的 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
    }
于 2012-10-10T23:45:44.040 回答