0

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

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

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

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

警报返回“未定义”。但这怎么可能呢？div.update-dialog 是按钮元素 (this) 的兄弟，因此对“closest”返回的结果调用“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 会发生变化吗？

4

2 回答 2

1

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

将您的代码更改为

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

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

小提琴

于 2013-09-04T23:32:16.847 回答
1

如果您在页面上有多个“.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);
        }); 

    });
});
于 2013-09-04T23:34:12.323 回答