javascript - 尝试使用 jQuery 清空 iframe 父 div

Question

我正在尝试单击 button > li > a iframe 包含 page_load_container div 中的页面加载。它工作完美，但是单击“remove_frame”按钮时，我想清空 page_load_container div，但它不起作用。预先感谢请帮助我。

JS

     <script>
        $(document).ready(function ()
        {
            $('.buton li a').click(function ()
            {
                var page_name = $(this).attr('data-link');
                $('.page_load_container').empty();
                $('.page_load_container').append('   <a class="remove_frame">x</a><iframe        id=\"page_frame\" src=\"' + page_name + '\" style=\"height:auto; min-height:400px; width:100%\"></iframe>');

            });
        });
        $("#page_frame").load(function ()
        {
            $('.remove_frame').click(function ()
            {
                $(this).parent().empty();
                //$(this).parent().find('iframe').remove();

            });
        });
    </script>

HTML

<div class="page_load_container"></div>
<ul class="buton">
    <li>
        <a data-link="page.html"></a>
    </li>
    <li>
        <a data-link="page2.html"></a>
    </li>
    <li>
        <a data-link="page3.html"></a>
    </li>
</ul>

Answer 1

您正在将框架添加到 DOM 之前设置框架的 onload 事件..
这是一个解决方案:http://jsfiddle.net/MKLwY

我将 onload 事件移到了 onclick 回调中

 $(document).ready(function ()
    {
        $('.buton li a').click(function ()
        {
            var page_name = $(this).attr('data-link');
            $('.page_load_container').empty();
            $('.page_load_container').append('   <a class="remove_frame">x</a><iframe        id=\"page_frame\" src=\"' + page_name + '\" style=\"height:auto; min-height:400px; width:100%\"></iframe>');
            $("#page_frame").load(function ()
            {
                $('.remove_frame').click(function ()
                {
                    $(this).parent().empty();
                }
            });
        });
   });