JQuery AppendTo函數在IE中不工作

Question

我查看了我的代碼，我找不到是什麼導致它在早期版本的IE中斷。該代碼適用於FF，Chrome和Safari。

該代碼應該在閱讀列表中用標題和照片生成一個div，然後底部的x將其刪除。但是，在IE上，它只顯示一個x。 網站：www.hearditfrom.com

我真的很感謝任何幫助！提前致謝。

下面是代碼：

$(function() { 
     $('a.addtoreadinglist').click(function(){ 
      $('<li id="arrayorder_' + $(this).attr('data-storyid') + '"> <div class="reading_list drop-shadow lifted"><div class="reading_list_container"><p class="reading_list_story"><a class="rlstory" href="' + $(this).attr('data-url') + '" data-storyid="' + $(this).attr('data-storyid') + '">' + $(this).attr('data-headline') + '</a></p></div><div class="rlbuttons"><a class="deletefromrl" data-storyid="'+ $(this).attr('data-storyid') + '" data-parent="arrayorder_' + $(this).attr('data-storyid') + '"><div class="deletebutton">x</div></div></div></li>').appendTo('#list ul'); 
      $(this).hide(); 
      $('#instruction').fadeOut('slow').remove(); 
      var order = $('#list ul').sortable("serialize") + '&update=update'; 
       $.post("updateReadingList.php", order, function(theResponse){ 
        $("#response").html(theResponse); 
       });      
     }) 
    }) 


    //photo 
    $(function() { 
     $('a.addtoreadinglistphoto').click(function(){ 
      $('<li id="arrayorder_' + $(this).attr('data-storyid') + '"><div class="reading_list drop-shadow lifted"><div class="reading_list_container"><p class="reading_list_story"><img class="reading_list_thumbnail" src="http://images.hearditfrom.com/timthumb.php?src=' + $(this).attr('data-photoname') + '&q=100&w=30&h=30" /><a class="rlstory" href="' + $(this).attr('data-url') + '" data-storyid="' + $(this).attr('data-storyid') + '">' + $(this).attr('data-headline') + '</a></p></div><div class="rlbuttons"><a class="deletefromrl" data-storyid="'+ $(this).attr('data-storyid') + '" data-parent="arrayorder_' + $(this).attr('data-storyid') + '"><div class="deletebutton">x</div></div></div></li>').appendTo('#list ul'); 
      $(this).hide(); 
      $('#instruction').fadeOut('slow').remove(); 
      var order = $('#list ul').sortable("serialize") + '&update=update'; 
       $.post("updateReadingList.php", order, function(theResponse){ 
        $("#response").html(theResponse); 
       });    
     }) 
    }) 

Answer 1

我不知道到底是什麼原因造成的問題，而是從調試在Chrome與IE8我看到下面一行是問題（減去appendTo語句） 。

$('<li id="arrayorder_' + $(this).attr('data-storyid') + '"><div class="reading_list drop-shadow lifted"><div class="reading_list_container"><p class="reading_list_story"><img class="reading_list_thumbnail" src="http://images.hearditfrom.com/timthumb.php?src=' + $(this).attr('data-photoname') + '&q=100&w=30&h=30" /><a class="rlstory" href="' + $(this).attr('data-url') + '" data-storyid="' + $(this).attr('data-storyid') + '">' + $(this).attr('data-headline') + '</a></p></div><div class="rlbuttons"><a class="deletefromrl" data-storyid="'+ $(this).attr('data-storyid') + '" data-parent="arrayorder_' + $(this).attr('data-storyid') + '"><div class="deletebutton">x</div></div></div></li>').appendTo('#list ul'); 

我不明白足夠的這是什麼代碼做什麼，或者有足夠的資金來調試這一切，但你應該能夠分解成更小的語句，然後找出哪一個是導致錯誤。例如：

var $li = $('<li />', { id: 'arrayorder_' + $(this).prop('data-storyid')); 
var $div1 = $('<div />').addClass('reading_list drop-shadow lifted'); 
var $div2 = $('<div />').addClass('reading_list_container'); 
etc 

//add elements one at a time to the DOM 

通過不將所有聲明作爲連接字符串，它將更容易識別代碼中的罪魁禍首。請注意，我爲每個新元素使用了自閉標籤。對於列表項我使用了一組參數來添加id。對於我使用addClass的div。這有助於分離您的代碼並簡化調試。

此外，我會使用prop而不是attr，因爲你在jQuery 1.8.3中。

我會用data來訪問數據元素。 $(this).data('storyid');

祝你好運。