Question

我创建了两个简短的javascript文件，每个文件都包含一个$(document).ready函数，该函数具有javascript来检测包含它的html文件中的按钮单击。我的主要html文件的脚本标签指向标头中的每个文件：

file1.js：

$(document).ready(function(){
  $('.wrapper').on('click', '.click_1', function(){
    alert('hello from the first file');
  });
});

file2.js：

$(document).ready(function(){
  $('.wrapper').on('click', '.click_2', function(){
   alert('hello from the second file');
  });
});

但是，我的目标是能够从标头及其功能一起动态删除脚本标签之一（第二个文件中的javascript）。为此，我在主html文件中创建了一个脚本，以通过src属性删除目标脚本标签。但是，尽管对页面源代码的检查表明确实删除了第三个脚本标签，但其功能仍然保留。例如，即使单击了.remove_2按钮，我仍然可以单击.click_2按钮并收到"hello from the second file"警报：

main.html：

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
  </head>
   <body>
     <div class="wrapper">
         <button class='click_1'>File1</button>
         <button class='click_2'>File2</button>
         <button class='remove_2'>Remove File2</button>
     </div>
   </body>
   <script>
    $(document).ready(function(){
     $('.wrapper').on('click', '.remove_2', function(){
       $('script[src="file2.js"]').remove();
     });
   });
   </script>
 </html>

简而言之，我希望能够动态删除脚本标签，以使标签所指向的文件中的javascript不再对html页面产生影响。但是，我无法做到这一点。谁能告诉我我的代码有什么问题吗？另外，我正在尝试达成的目标是否可能？谢谢。

Answer 1

尝试从第二个按钮中{@ 3}单击单击事件，然后将其删除：

$('.click_2').unbind("click");

尽管现在不建议取消绑定。较新的格式为“关闭”：

$('.click_2').off( "click", "**" );

unbinding

也就是说，您似乎确实在使用一种非常特殊的方法来禁用点击功能。

Answer 2

删除外部脚本不会删除事件处理程序。它们附在当前文档上。

解决方案可以是：

删除脚本
获取所有html页面

用新内容替换html页面

$('.wrapper').on('click', '.remove_2', function(){
    $('script[src="file2.js"]').remove();
    var html = document.documentElement.innerHTML;
    document.open('text/html');
    document.write(html);
    document.close();
});

在jQuery中，删除脚本后仅替换标头：

$('.wrapper').on('click', '.remove_2', function(){
    var header = $('html head');
    header.find('script[src="file2.js"]').remove();
    $('html head').replaceWith(header);
});

使用Jquery动态删除脚本标签时的问题

2 个答案: