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

祝你好运。

JQuery AppendTo函数在IE中不起作用

1 个答案: