jQuery對話框無法正常工作

Question

因此，我有一個div“通道內容”，當單擊一個按鈕時，該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

編輯以反映OP希望解決數據更改的需求。

將div更改為對話框后，它將不再以您期望的方式出現在DOM中。 因此，如果您想要除了原始div之外還包含該內容的對話框，可以對其進行克隆。

由於您希望對話框考慮div中內容的更改，因此可以等待創建對話框，直到需要它為止（即，單擊按鈕時），然后它將反映對內容的最新更改。

實際上，我不確定您是否需要銷毀物品。 我不太了解jQuery的內部知識，無法知道以前創建的對話框是否會阻塞內存，或者通常的垃圾回收過程是否可以解決這些松散的問題。 我認為安全比后悔好，除非有比我更專業的人向您保證不需要。

var $dialog;

$('#max-passage').click(function(){
  if ($dialog){
    $dialog.dialog('destroy');
  }

  $dialog = $('#passage-content').clone().dialog({
    autoOpen:true,
    title:'Passage'
  });
});

這是一個演示： http : //jsbin.com/mizoda/edit?html,js,output

Answer 2

嘗試將段落內容對話框存儲為變量，然后調用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/