Question

我无法打开对话框div。当我尝试打开这样的对话框时，没有任何反应：

$(this).closest('div.editable').find('.update-dialog').dialog("open");

当我尝试访问对话框div元素以查看我是否真的得到任何东西时，

alert($(this).closest('div.editable').find('.update-dialog').prop("class"));

警报返回“未定义”。但这怎么可能呢？ div.update对话框是按钮元素（this）的兄弟，所以在“最近”返回的结果上调用“find”应该得到div.update-dialog。

这是完整的代码。感兴趣的领域标有评论：

<!DOCTYPE html>
<html>
<head>
<title>sourcecode test</title>
</head>
<body>

<!-- DIALOG DIV - note the hierarchy/tree of the html elements -->
<div class ="editable" id="div_John E. Coons[instructor_status]"contenteditable="1">

    <span class="text-error">Error: More than one user with same fname and lname</span>
    <br/>Users:
    <br/>
    <span class="multiple-users">&nbsp Instructor ID: 23, Common Name: John E. Coons</span>
    <br/>
    <span class="multiple-users">&nbsp Instructor ID: 17447, Common Name: John E Coons</span>
    <br/>
    <div class="update-dialog" title="Update Common Name">Which instructor do you want to update?
        <p><input type="radio" id="instructor_23" name="instructor" value="23"/>
            <label for="instructor_23">Instructor ID: 23, Common Name: John E. Coons</label>
        </p>

        <p>
            <input type="radio" id="instructor_17447" name="instructor" value="17447"/>
            <label for="instructor_17447">Instructor ID: 17447, Common Name: John E Coons</label>
        </p>Which common name do you want to assign the instructor?

        <p>
            <input type="radio" id="commonName_23" name="common_name" value="John E. Coons"/>
            <label for="commonName_23">John E. Coons</label>
        </p>

        <p>
            <input type="radio" id="commonName_17447" name="common_name" value="John E Coons"/>
            <label for="commonName_17447">John E Coons </label>
        </p>

    </div>

    <button class="update-button" type="button">Update Common Name of an Instructor</button>
</div>


<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
      // creates dialog in div
      $("div.update-dialog").dialog({
            autoOpen: false,
            dialogClass: 'dialogStyle',
            resizable: false,
            modal: true,
            buttons: {
                "Update": function() {
                //$.load('update_common_name.php', 
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
       });

     // FIX THIS: DIALOG DOES NOT OPEN ON CLICK
     $('div.editable').on('click', 'button.update-button', function () {
        $(this).closest('div.editable').find('.update-dialog').dialog("open");

        // alert test returns "undefined"
        alert($(this).closest('div.editable').find('.update-dialog').prop("class"));

     }); 




     $('input:radio').change(function () {        

        if ($(this).attr('name') === 'instructor') {
            instructor_id = $(this).val();
        }
        if ($(this).attr('name') === 'common_name') {
            common_name = $(this).val();
        }
        alert(instructor_id + common_name);
     }); 


});
</script>
</body>
</html>

这是JSfiddle：http://jsfiddle.net/5fKYn/。对话框与div关联后，DOM是否会更改？

Answer 1

对话框正在移出DOM中的位置，成为body标记的根元素。这是处理对话框的一种相当常见的方式。

将代码更改为

$('div.editable').on('click', 'button.update-button', function () {
    $('.update-dialog').dialog('open');
    $('.update-dialog').prop('class');
});

可以工作，但我建议使用id标识符而不是类，因为所有对话框都将处于相同的DOM级别。

Fiddle

Answer 2

如果您在页面上有多个“.editable”，您应该使用插件样式方法来连接您想要实现的行为：

$(function() {

    jQuery(".editable").each(function()
    {
        var $this = jQuery(this);
        // Select the button within the scope of the current ".editable"
        var $btnUpdate = jQuery(".update-button", $this);

        // Create the dialog within the scope of the current ".editable"
        var $dialogElm = $("div.update-dialog", $this).dialog({
        autoOpen: false,
        dialogClass: 'dialogStyle',
        resizable: false,
        modal: true,
        buttons: {
            "Update": function() {
            //$.load('update_common_name.php', 
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
        });

        // Attach button behaviour with in the scope of the current ".editable"
        $btnUpdate.on('click', function () {
            $dialogElm.dialog("open");
        }); 

        $('input:radio', $this).change(function () {        
            if ($(this).attr('name') === 'instructor') {
                instructor_id = $(this).val();
            }
            if ($(this).attr('name') === 'common_name') {
                common_name = $(this).val();
            }
            alert(instructor_id + common_name);
        }); 

    });
});

JQuery：无法打开对话框

2 个答案: