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 を追加しました。div には addClass を使用しました。これにより、コードを分離し、デバッグを簡素化できます。

また、jQuery 1.8.3 を使用しているという理由propではなく、使用します。attr

dataデータ要素にアクセスするために使用します。$(this).data('storyid');

幸運を。

于 2013-01-21T02:34:47.327 に答える