Question

我正在尝试点击buton > 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

我在onclick回调中移动了onload事件

 $(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();
                }
            });
        });
   });

Answer 2

使用jquery on方法如下：

   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.buton li a').on('click', function () {
                    var page_name = $(this).data('link');
                    var container = $('.page_load_container');
                    container.html('<a class="remove_frame">x</a><iframe id=\"page_frame\" src=\"' + page_name + '\" style=\"height:auto; min-height:400px; width:100%\"></iframe>');
                });

                $(document).on('click', '.remove_frame', function () {
                    $(this).parent().empty();
                });
            });
        </script>
    </head>
    <body>
        <div class="page_load_container"></div>
        <ul class="buton">
            <li>
                <a data-link="page.html">page.html</a>
            </li>
            <li>
                <a data-link="page2.html">page2.html</a>
            </li>
            <li>
                <a data-link="page3.html">page3.html</a>
            </li>
        </ul>
    </body>
    </html>

尝试使用jQuery清空iframe父div

2 个答案: