0

我查看了我的代码，我找不到导致它在早期版本的 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);
                });             
        })
    })
4

1 回答 1

0

我不知道究竟是什么导致了这个问题，但是从 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');

祝你好运。

于 2013-01-21T02:34:47.327 回答