ダイアログ ボックスの 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">  Instructor ID: 23, Common Name: John E. Coons</span>
<br/>
<span class="multiple-users">  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 は変更されますか?