Question

这是位于此处的其他帖子的存根：Dynamically added content no longer opens accordion

我遇到的问题是我的数据库结果集似乎是在JQuery中缓存的。我已将cache:false添加到AJAX调用中，但对于我单击的任何元素，结果显示相同，这是不正确的。每个元素都有自己的ID，并返回不同的结果集。我不确定为什么会发生这种情况，但是我有什么遗漏，或者其他我可以查看的内容吗？

这是到目前为止的AJAX调用：

  ...
  success : function(data)
  {
    $('<div/>', {
      id:'modal'
    }).html(data).appendTo('body');

    $('#modal').popup({
      autoopen  : true,
    });

    $('.accordion').accordion({
        collapsible: true,
    });
  },

基本上，data包含从我的数据库返回的结果。我已经在Firebug中检查了结果，并且可以看到每个元素都有正确的数据，但它没有那样呈现。

编辑：

$.ajax({
url  : "modal.asp",
type : "POST",
cache: false,
data : $(this).data('cid'),
success : function(data)
{
  $('<div/>', {
    id:'modal'
  }).html(data).appendTo('body');

  $('#modal').popup({
    autoopen  : true,
  });

  $('.accordion').accordion({
    collapsible: true,
  });
}

Answer 1

问题在于你没有移除旧的#modal div，因此它们会累积。

具有相同ID的多个DOM元素是无效的HTML，选择$('#modal)的效果是不确定的。它可能正在重复选择第一个......

Answer 2

此代码：

$('<div/>', {
    id:'modal'
    }).html(data).appendTo('body');

将创建ID为div的新modal元素。

$('div#modal').html(data).appendTo('body');

这会修改你的模态内容。

如果您的元素在第一次调用时不存在，请执行以下操作：

if($('div#modal').length > 0){
    $('div#modal').html(data).appendTo('body');
} else {
    $('<div/>', {
        id:'modal'
       }).html(data);
}

Answer 3

$.ajax({
        url  : "modal.asp",
        type : "POST",
        cache: false,
        data : $(this).data('cid'),
    success : function(data)
    {
        var newData = "<div>" + data + "</div>";
        $('.accordion').html(newData)
        $('.accordion').accordion("refresh");    

        $('#modal').modal('show');      
    }

AJAX似乎正在缓存我的结果

3 个答案: