AJAX似乎正在緩存我的結果

Question

這是位於此處的另一篇文章的存根： 動態添加的內容不再打開手風琴

我遇到的問題是我的數據庫結果集似乎已緩存在JQuery中。 我在AJAX調用中添加了cache:false ，但是對於單擊不正確的任何元素，結果看起來都是一樣的。 每個元素都有其自己的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為modal的新div元素。

$('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');      
    }