使用 Jquery .html() 函数替换一个<div>与<script> included?

Question

Below is an example of a problem I am having.以下是我遇到的问题的示例。 I am using $(locator).html(data) to replace a DIV after an ajax call.我在 ajax 调用后使用 $(locator).html(data) 替换 DIV。 The issue is that the DIV also have a SCRIPT tag inside it, and those functions in that SCRIPT tag are remaining in memory after I .empty() that DIV.问题是 DIV 内部也有一个 SCRIPT 标签，并且在我 .empty() 那个 DIV 之后，该 SCRIPT 标签中的那些函数仍保留在内存中。

Is there a way to remove/de-register/undefine all functions in the SCRIPT tag automatically/programmatically?有没有办法自动/以编程方式删除/取消注册/取消定义 SCRIPT 标签中的所有功能？ I guess I thought the Jquery .empty() would do that, but I guess not.我想我认为 Jquery .empty() 会这样做，但我想不会。 I think I could do something manual like test1 = undefined but I don't want to have to explicitly do that for all the functions.我想我可以做一些像test1 = undefined这样的手动操作，但我不想对所有的函数都明确地这样做。

Thanks.谢谢。

EDIT: I am working on a legacy product, so there are dozens of html files with dozens of functions that could be loaded for the newString variable.编辑：我正在开发一个遗留产品，所以有几十个 html 文件可以为 newString 变量加载几十个函数。 So my goal is not to change any of those, but to solve this lingering-function issue at the time of .empty() and .html() when replacing the div contents.所以我的目标不是改变其中任何一个，而是在替换 div 内容时解决 .empty() 和 .html() 时的这个延迟函数问题。

EDIT 2: And I can't just "delete" the function, because I don't always know what the function(s) will be.编辑 2：我不能只是“删除”函数，因为我并不总是知道函数是什么。 I need to do this programmatically.我需要以编程方式执行此操作。 (seems I keep getting flagged as a duplicate question, but again, I can't delete what I don't know yet) （似乎我一直被标记为重复问题，但同样，我无法删除我还不知道的内容）

 function change () { // this newString is mock html data coming back from an ajax call let newString = "<p>Reloaded page</p>"; console.log("#emptyme HTML before empty():") console.log($("#emptyme").html()); $("#emptyme").empty(); console.log("#emptyme HTML AFTER empty():") console.log($("#emptyme").html()); $("#emptyme").html(newString); if (typeof test1 !== "undefined") { $("#error").html("test1() WAS STILL FOUND!!"); console.log("test1() WAS STILL FOUND!! Function definition from memory is:"); console.log(test1); } console.log("finished change function."); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="emptyme"> <p> Initial page </p> <script> function test1 () { console.log("this is test1 function."); } </script> </div> <button onclick="change()"> load change </button> <div id="error"> </div> </body> </html>

Answer 1

JavaScrip has an internal garbage collection and your code does not have to destroy things like you would do in C++ JavaScrip 有一个内部垃圾收集器，您的代码不必像在 C++ 中那样销毁东西

However, at Certain times we would want to "destroy a function" where it is resources expensive Because js runs from top to bottom you can overwrite that function if you have called it in a variable later in the program to free up those resources.但是，在某些时候，我们希望“销毁一个函数”，因为它是资源昂贵的因为 js 从上到下运行，如果您稍后在程序中的变量中调用它以释放这些资源，您可以覆盖该函数。 Or even do it later in the logic of the program甚至在程序的逻辑中稍后再做

   var ExpensiveFunction =( function () {
 //..code
function getRidOfthis1(){ console.log("foo1"); }
function getRidOfthis2(){ console.log("foo2"); }
function getRidOfthis3(){ console.log("foo3"); }
function getRidOfthis4(){ console.log("foo4"); }

//initiate an internal reference to them 
ExpensiveFunction.getRidOfthis1 = getRidOfthis1;
ExpensiveFunction.getRidOfthis2 = getRidOfthis2;
ExpensiveFunction.getRidOfthis3 = getRidOfthis3;
ExpensiveFunction.getRidOfthis4 = getRidOfthis4;

}  );

//Functions available outside of the nesting 
ExpensiveFunction()
ExpensiveFunction.getRidOfthis1();
ExpensiveFunction.getRidOfthis2();

// overidding it 
ExpensiveFunction =0

使用 Jquery .html() 函数替换一个<div>与<script> included?

问题描述

1 个解决方案

解决方案1
1 2021-03-04 00:43:13

使用 Jquery .html() 函数替换一个<div>与<script> included?

问题描述

1 个解决方案

解决方案1 1 2021-03-04 00:43:13

解决方案1
1 2021-03-04 00:43:13