Question

所以我有一个div＆＃34;段落内容＆＃34;当单击一个按钮时，此div的文本将被放入jquery对话框中。
这是我的HTML：

self.colors

＆＃34;段落内容＆＃34;是我想抓住并插入对话框的。

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

<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>

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

 //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;
 });

我认为我的问题在于我称之为#passage / passage-content的方式，但我无法弄明白。
非常感谢您的帮助！

Answer 1

已编辑，以反映OP希望考虑数据变化。

将div更改为对话框后，它将不再以您期望的方式进入DOM。因此，除了原始div之外，如果您想要一个包含该内容的对话框，您可以克隆它。

由于您希望对话框考虑到div中内容的更改，您可以等待创建对话框，直到需要它为止，即单击按钮时，然后它将反映最新的更改。内容。

我实际上不是100％确定你是否需要销毁东西。我不知道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

尝试将段落内容对话框存储为变量，然后调用对话框（＆＃34;打开＆＃34;）。

您的代码稍作修改：

[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/

JQuery对话框无法正常工作

2 个答案: