Question

我有2个html文件

 1. main.html
 2. external.html - contains script tag

一旦用户使用jquery.load函数

单击按钮，

外部内容将加载到main.html

现在我的问题是，如果用户单击加载按钮两次，即使我清空main.html中的div元素，external.html内的函数也会触发两次

我尝试了

empty()

和

html("")

函数来清除div的内容，但仍然没有运气。

这是我的代码http://plnkr.co/edit/XLZGquoebTTHahgJWNOk?p=preview

main.html（以下代码）

    <html>
    <head>
        <title>Main Page</title>
    </head>

    <body>
        <h1>Main Page</h1>
        <input type='button' id='btn_load' value='Load External Content' />

        <br /><p id="loading" style="display:none;" >Loading Data, Please wait...</p>

        <div id="page_content">

        </div>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

      <script>
        $(document).on('click','#btn_load',function(){  

            $('#loading').show();

            $('#page_content').html("");
            $('#page_content').empty();
            $('#script_external').remove();

            $('#page_content').load('external.html',function(){
              $('#loading').hide();
            });

        }); 
      </script>
    </body>
    </html>

external.html（以下代码）

<h3>External Data</h3>

<input type='button' id='btn_clickme' value='Click Me' />

<script id='script_external'>
   $(document).on('click','#btn_clickme',function(){
      alert("This msg is from external file");
   });
</script>

Answer 1

在重新绑定新事件

之前，您应该使用off（）

即使元素为空，外部文件中的脚本仍会触发

1 个答案: