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

bodyダイアログ ボックスは、タグのルート要素になるように DOM 内の位置から移動されています。これは、ダイアログを処理するためのかなり一般的な方法です。

コードをに変更する

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

動作しますが、すべてのダイアログが同じ DOM レベルになるため、クラスではなく ID 識別子を使用することをお勧めします。

フィドル

于 2013-09-04T23:32:16.847 に答える