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

Question

我从this thread 获得了这个动态创建的 JQueryUI 对话框，它通过 Ajax 从<a href='2.html'> 加载内容。但是我发现以下代码存在问题。即使 AJAX 请求如控制台所示成功发出，内容也无法附加到对话框容器中。谁能找出这一行的加载功能有什么问题：

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