无法在jQuery对话框中加载AJAX内容

Question

我从这个线程中获得了这个动态创建的JQueryUI对话框， 该对话框通过Ajax从<a href='2.html'>加载内容。 但是我发现以下代码存在问题。 即使如控制台中所示成功完成了AJAX请求，该内容也无法追加到对话框容器。 任何人都可以在此行找到load函数的问题吗：

dialog.load($(this).attr('href') + ' #content').dialog

我努力了

dialog.append($(this).data('source') + ' #content').dialog
dialog.text($(this).data('source') + ' #content').dialog

他们工作。

码：

var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');

$(document).ready(function () {

   $(document).ready(function () {
      $('button').click(function () {
       $(this).next('.area').append('<a id="open_dia_'+Date.now().toString()+'"  class="open_dia" title="this title" href="2.html">Click</a>');
   });

    $(document).on('click', '.open_dia', function (evt) {
        var dialogid = 'dialog_'+$(this).attr('id');
        var dialog = null;
        if ($('#'+dialogid.toString()).length == 0)
        {
            dialog = $('<div id="'+dialogid+'"></div>').append(loading.clone());
            dialog.load($(this).attr('href') + ' #content').dialog({
                title: $(this).attr('title'),
                width: 500,
                height: 300
            });
        }
        else
        {
            dialog = $('#'+dialogid.toString());
        }


        dialog.dialog('open');
        return false;

    });
});

Answer 1

您可以通过以下方式进行操作：

创建一个div，然后在其中创建一个div来附加内容。

<div id="dialogDiv" title="this title" style="display:none;">
  <div id='dialogDivDynamic'></div>
</div>    

在对话框中转换您的第一个div：

$("#selectionResult").dialog({
        modal: true,
        width: '900px',
        buttons: [{ text: "Close", click: functionToCloseDialog() }]
});

将内容附加到第二个div：

$('#dialogDivDynamic').append("This is my new content");

function functionToCloseDialog() {
  $('#dialogDiv').dialog('close');
}

Answer 2

哈希之前似乎有一个空格...尝试这种方式：

dialog.load($(this).attr('href') + '#content').dialog({
  title: $(this).attr('title'),
  width: 500,
  height: 300
});