jQuery .remove () - iframe YouTube не удаляется полностью в Internet Explorer - PullRequest
Новая
       2

jQuery .remove () - iframe YouTube не удаляется полностью в Internet Explorer

3 голосов
/ 02 января 2012

Я удаляю элемент tr из этой таблицы, используя jQuery 1.7.1, и он не работает должным образом в Internet Explorer (у меня 8.07, но я полагаю, больше IE делают это - другие люди делают то же самое)

Удалить звонок: 

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

Когда я это делаю, экран становится черным (кажется, что это фон iframe для YouTube или что-то в этом роде - несколько дней назад была часть сайта, на которой была ссылка на одно из видео на YouTube).

Код проверяет нормально. Что я делаю не так? 

<!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>

Ответы [ 2 ]

11 голосов
/ 12 января 2013

Я недавно столкнулся с этой проблемой в Internet Explorer 8. Моя работа заключалась в том, чтобы сначала очистить атрибут src в iframe, а затем удалить его. 

$('#iframeID').attr("src", " ");
$('#iframeID').remove();
0 голосов
/ 16 июля 2012

Internet Explorer (любая версия) хорошо известен тем, что обрабатывает таблицы и все операции с ними очень странно. Почему вы должны удалить строку таблицы (tr)? Разве вы не можете просто поместить свой iframe youtube в любой div и затем поместить его в tr (фактически в td, содержащийся внутри tr)? Затем вы удаляете div и оставляете tr пустым. Вы должны получить тот же эффект, но без каких-либо проблем, который может быть вызван удалением строки таблицы вместо ее содержимого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...