2012-01-02 2 views
3

私はこのテーブルから要素trを削除していますが、jQuery 1.7.1を使用しています。推測よりIEはそれを行う - )他の人が同じものを持ってjQuery .remove() - youtube iframeがInternet Explorerで完全に削除されない

削除コール:私はそれを行うと、画面が黒くなり

$("#tr_video_element_1").remove(); 

それはユーチューブはiframeの背景や何かがあるように(と思われる - 数数日前にYouTubeの動画の1つにリンクしていたサイトの一部がありました)。

コードは妥当性を検証します。私は間違って何をしていますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
    <script src="js/sorted_elements.js" type="text/javascript"></script> 
    <script src="js/ajax.js" type="text/javascript"></script> 
    <title> Panel </title> 
</head> 
<body><table id="editorial_table"><thead><tr> 
        <th>Position</th> 
        <th>Youtube video id</th> 
        <th>Video</th> 
        <th>Delete</th> 
       </tr> 
     </thead><tbody><tr class="video_tr_element" id="tr_video_element_1"><td><input readonly="readonly" class="position" name="input_position_1" id="input_position_1" size="1" type="text" value="1" /></td><td><input class="yt_link" name="yt_link_position_1" id="yt_link_position_1" type="text" value="cjDyJnzYgpk" /> 
        <div style="margin:auto; margin-top:9px; width:70px; "> 
         <a href="#" class="up 1" id="up_pos_1"><img src="img/up_arrow.png" alt="Move object up" /></a> 
         <a href="#" class="down 1" id="down_pos_1"><img src="img/down_arrow.png" alt="Move object down" /></a> 
        </div> 
       </td><td><div class="inline" style="height:186px;width:210px;margin:0;margin-right:5px;padding:0; "> 

         <iframe id="if_pos_1" title="YouTube video player" class="youtube-player" 
         width="210" height="186" src="http://www.youtube.com/embed/cjDyJnzYgpk" 
         frameborder="0"></iframe> 
      </div></td><td><a class="delete 1" href="#">Delete</a></td></tr><tr class="video_tr_element" id="tr_video_element_2"><td><input readonly="readonly" class="position" name="input_position_2" id="input_position_2" size="1" type="text" value="2" /></td><td><input class="yt_link" name="yt_link_position_2" id="yt_link_position_2" type="text" value="cjDyJnzYgpk" /> 
        <div style="margin:auto; margin-top:9px; width:70px; "> 
         <a href="#" class="up 2" id="up_pos_2"><img src="img/up_arrow.png" alt="Move object up" /></a> 
         <a href="#" class="down 2" id="down_pos_2"><img src="img/down_arrow.png" alt="Move object down" /></a> 
        </div> 
       </td><td><div class="inline" style="height:186px;width:210px;margin:0;margin-right:5px;padding:0; "> 

         <iframe id="if_pos_2" title="YouTube video player" class="youtube-player" 
         width="210" height="186" src="http://www.youtube.com/embed/cjDyJnzYgpk" 
         frameborder="0"></iframe> 
      </div></td><td><a class="delete 2" href="#">Delete</a></td></tr><tr class="video_tr_element" id="tr_video_element_3"><td><input readonly="readonly" class="position" name="input_position_3" id="input_position_3" size="1" type="text" value="3" /></td><td><input class="yt_link" name="yt_link_position_3" id="yt_link_position_3" type="text" value="NMqLH6_bDNs" /> 
        <div style="margin:auto; margin-top:9px; width:70px; "> 
         <a href="#" class="up 3" id="up_pos_3"><img src="img/up_arrow.png" alt="Move object up" /></a> 
         <a href="#" class="down 3" id="down_pos_3"><img src="img/down_arrow.png" alt="Move object down" /></a> 
        </div> 
       </td><td><div class="inline" style="height:186px;width:210px;margin:0;margin-right:5px;padding:0; "> 

         <iframe id="if_pos_3" title="YouTube video player" class="youtube-player" 
         width="210" height="186" src="http://www.youtube.com/embed/NMqLH6_bDNs" 
         frameborder="0"></iframe> 
      </div></td><td><a class="delete 427" href="#">Delete</a></td></tr><tr class="video_tr_element" id="tr_video_element_4"><td><input readonly="readonly" class="position" name="input_position_0" id="input_position_0" size="1" type="text" value="0" /></td><td><input class="yt_link" name="yt_link_position_0" id="yt_link_position_0" type="text" value="" /> 
        <div style="margin:auto; margin-top:9px; width:70px; "> 
         <a href="#" class="up 0" id="up_pos_0"><img src="img/up_arrow.png" alt="Move object up" /></a> 
         <a href="#" class="down 0" id="down_pos_0"><img src="img/down_arrow.png" alt="Move object down" /></a> 
        </div> 
       </td><td><div class="inline" style="height:186px;width:210px;margin:0;margin-right:5px;padding:0; "> 

         <iframe id="if_pos_0" title="YouTube video player" class="youtube-player" 
         width="210" height="186" src="http://www.youtube.com/embed/" 
         frameborder="0"></iframe> 
      </div></td><td><a class="delete 478" href="#">Delete</a></td></tr><tr class="video_tr_element" id="tr_video_element_5"><td><input readonly="readonly" class="position" name="input_position_4" id="input_position_4" size="1" type="text" value="4" /></td><td><input class="yt_link" name="yt_link_position_4" id="yt_link_position_4" type="text" value="NMqLH6_bDNs" /> 
        <div style="margin:auto; margin-top:9px; width:70px; "> 
         <a href="#" class="up 4" id="up_pos_4"><img src="img/up_arrow.png" alt="Move object up" /></a> 
         <a href="#" class="down 4" id="down_pos_4"><img src="img/down_arrow.png" alt="Move object down" /></a> 
        </div> 
       </td><td><div class="inline" style="height:186px;width:210px;margin:0;margin-right:5px;padding:0; "> 

         <iframe id="if_pos_4" title="YouTube video player" class="youtube-player" 
         width="210" height="186" src="http://www.youtube.com/embed/NMqLH6_bDNs" 
         frameborder="0"></iframe> 
      </div></td><td><a class="delete 494" href="#">Delete</a></td></tr></tbody></table> 
</body></html> 

答えて

0

Internet Explorer(任意のバージョン)は、テーブルとすべての操作を非常に奇妙に扱うことでよく知られています。なぜあなたはテーブル行(tr)を削除する必要がありますか?あなたは単に任意のdivの中にあなたのYouTubeのiframeを入れて、次にそれをtrに入れることはできません(実際にはtrの中に含まれています)?次にdivを削除してtrを空のままにします。非常に同じ効果が得られるはずですが、問題はありませんが、その内容の代わりに表の行を削除することによって発生する可能性があります。

11

最近Internet Explorer 8でこの問題が発生しました。 私の回避策は、まずiframeのsrc属性を空にしてから削除することでした。

$('#iframeID').attr("src", " "); 
$('#iframeID').remove(); 
+2

私は '$(this).attr( 'src'、 ''); 'を使っていましたが、これは本当に同じです。 付録と同様に、それはIE9でもまだ問題です - 驚き、驚き! :) – army

+0

これは症状を解決しますが、私たちはまだ解決していない基本的なメモリリークがあると思います。 – adamdport