javascript - JQuery 对话框无法正常工作

Question

所以我有一个 div“passage-content”，当单击一个按钮时，这个 div 的文本被放入一个 jquery 对话框中。
这是我的 HTML:

<div id="passage-section">
  <!-- Title -->
  <div id="passage-title"></div>

  <!-- The panel that will display the content -->
  <div id="passage-content">THIS IS A DIV</div>

  <!-- Button that when clicked activates a dialog box for the passage. -->
  <button id="max-passage" class="max"></button>
</div>

“passage-content”的文本是我试图抓取并插入到对话框中的内容。

我遇到了两个问题。
1) 页面上的 div 中没有任何内容，但是当我单击我的对话框按钮时，文本仅出现在对话框中。
这是代码

 //Opens a dialog box when the button max-passage is clicked
 $('#passage-content').dialog({
    autoOpen: false,
    title: 'Passage'
 });
 $('#max-passage').click(function() {
    $('#passage-content').dialog('open');
    return false;
 }); 

2) 如果我稍微更改我的代码，文本会出现在 div 中，但是我的 JQuery 对话框按钮不起作用。
这是代码

//Opens a dialog box when the button max-passage is clicked
$('#passage').dialog({
   autoOpen: false,
   title: 'Passage'
});
$('#max-passage').click(function() {
  $('#passage').dialog('open');
  return false;
});

我认为我的问题出在调用#passage/passage-content 的方式上，但我无法弄明白。
非常感谢您的帮助!

Answer 1

尝试将段落内容对话框存储为变量，然后调用 dialog("open")。

这里是你的代码稍作修改:

[HTML]

<div id="passage-section">
    <!-- Title -->
    <div id="passage-title"></div>

    <!-- The panel that will display the content -->
    <div id="passage-content">THIS IS A DIV</div>

    <!-- Button that when clicked activates a dialog box for the passage. -->
    <button id="max-passage" class="max">Open Dialog</button>
</div>

[JavaScript]

//Opens a dialog box when the button max-passage is clicked
dialog = $('#passage-content').dialog({
    autoOpen: false,
    title: 'Passage'
});

$( "#max-passage" ).on( "click", function() {
    dialog.dialog( "open" );
});

http://jsfiddle.net/aseeto/vyb00a85/