jquery替换html和javascript函数

Posted 2023-05-07

【中文标题】jquery替换html和javascript函数

【英文标题】：jquery replace html and javascript function

【发布时间】：2016-08-17 09:31:18

【问题描述】：

[编辑：我试图只把我的代码的相关部分放在这里。我知道这导致了混乱。对于那个很抱歉。这是我可以创建的一个 sn-p 导致相同的问题。在此处添加 sn-p：]

加载 sn-p 后，单击按钮。

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

<div id="hello">
  Some text
  <script>
	jQuery(document).ready(function () 
		 func();
  );  
    var a = 5;
    function func() 
      alert("Value is FIVE. Integer value: " +a);
    
</script>
</div>

<div id="mybtn" style="border: 2px solid black; padding:5px; background-color: yellow; width: 100px">CLICK</div>
<script>
   var data = " \
		  Some text2 \
		  <script> \
			jQuery(document).ready(function ()  \
				func(); \
			); \
            var a = 6; \
			function func()  \
			  alert('Value is SIX. Integer value: ' +a); \
			 \
			<\/script> ";
			
	$('#mybtn').on('click', function(e) 
	  $('#hello').html(data);  
	);
</script>   
   

我希望在单击按钮时看到六个 6（或者可能是五个 5）。但是请参阅 SIX 5。有趣的是正在调用新函数但正在使用旧值 (5)。在我的实际代码中，我的 func() 方法低于我调用它的位置，并且还在 settimeout(func...) 中调用它。试图了解正在发生的事情。

【问题讨论】：

我猜你没有关闭script标签的事实就在示例代码中，对吧...？

你没有在哪里定义 var1 = 4 那么你为什么希望它被打印出来？

此版本中缺少 。你能编辑你的代码并提供这部分的原件吗？

仅根据结果，似乎函数 func 没有被覆盖，但变量有。也许您可以仔细检查新代码中的 func 内容（在控制台中打印出来）

原因与 script 更改有关，但实际的 javascript 没有更新。您必须“刷新”script 标签才能解决此问题。如果您可以在小提琴中重现此内容，我很乐意向您展示解决方案

【参考方案1】：

更新

根据问题的变化，新的问题是你为变量a声明新值的位置。

因为：

jQuery(document).ready(function () 

在文档准备好时执行代码，因为当您替换 hello 元素的 html 时，您的文档已经准备好，所以在第一次单击时您会得到值 5并且只有在您获得新值之后。 从第二次开始，由于 html 已更改，当您单击时，您只激活了就绪功能。 解决方法是在文档准备好之前在数据字符串中声明变量a。

您可以使用添加的按钮“describe function”来自己查看hello div中包含的脚本内容。

为了更好地理解，我在您的 func 函数中添加了一个字符串作为参数，以便了解它的调用方式和时间。

更新了sn-p：

$(document).on('click', '#btn2', function (e) 
  $('body').append('<br>var a is: ' + a + '  func() is: ' + func.toString())
  .append('<br><div style="border: double;">hello HTML: ' + $('#hello')[0].outerHTML.replace(/</g, '&lt;')
          .replace(/>/g, '&gt;') + '</div>');
);

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

<div id="hello">
    Some text
    <script>
        jQuery(document).ready(function () 
            func("inside ready");
        );
        var a = 5;
        function func(str) 
            alert("FIRST: " + str + "  Value is FIVE. Integer value: " +a);
        
    </script>
</div>

<div id="mybtn" style="border: 2px solid black; padding:5px; background-color: yellow; width: 100px">CLICK</div>
<script>
    var data = " \
		  Some text2 \
		  <script> \
            var a = 6; /* HERE!!!!!!!!!!!!!!*/\
			jQuery(document).ready(function ()  \
				func('inside second ready'); \
			); \
			function func(str)  \
			  alert('SECOND: ' + str + ' Value is SIX. Integer value: ' +a); \
			 \
			<\/script> ";

    $('#mybtn').on('click', function(e) 
        $('#hello').html(data);
    );
</script>
<button id="btn2">Describe function</button>

我创建并测试了一个可能的类似情况，它对我有用：

$(function () 
  var newcode = '<script>' +
      'var var1 = 3;' +
      'function func() ' +
      '    console.log("VALA is 4");' +
      '    console.log("VALB is " + var1);' +
      '';
  $('#btn1').on('click', function (e) 
    $.getJSON('https://api.github.com/users', function(data) 
       $('#box1').html(newcode);
    );
  );
  $('#btn2').on('click', function (e) 
    func();
    $('body').append('<br>var var1 is: ' + var1 + '  func() is: ' + func.toString());
  );
);

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<div id="box1">
    <script>
        var var1 = 2;
        function func() 
            console.log("VALA is 1");
            console.log("VALB is " + var1);
        
    </script>
</div>
<button id="btn1">Simulate Ajax Call</button>
<button id="btn2">Call function</button>

【参考方案2】：

这与页面上新脚本的 JavaScript 解析和执行有关。当函数执行时，当新文档准备好触发函数执行时，旧值仍然存在。

详细来说，这些是按顺序发生的（大致）

新代码到位（由 Javascript 解析）用新函数替换旧函数（其中包含 SIX） NEW 文档就绪触发器（调用 NEW 函数时 OLD a 值仍然存在（5） 然后，a 值被替换为新值 6（不再执行具有新值的调用

在这里查看我是如何更改 sn-p 的。我在您的代码中添加了两个alert('a:'+a);\。现在执行它，您会看到警报序列：

第二个会在 6 发生变化后发出警报。

   var data = " \
              Some text2 \
              <script> \
                jQuery(document).ready(function ()  \
                    func(); \
                ); \
        alert('a:'+a);\
             var    a = 6; \
            alert('a:'+a);\
            function func()  \
                  alert('Value is SIX. Integer value: ' +a); \
                 \
                <\/script> ";

    $('#mybtn').on('click', function(e) 
      $('#hello').html(data);
      console.dir($('#hello').html());
    );

NOTE: 移动这个var a = 6; \ 在字符串中的文档准备好之前，它首先被执行。

把它想象成你有这个：

    var  a = 6; \
    func(); \

EDIT2：文档准备就绪

查看 jQuery 源代码；当$(document).ready() 第一次触发时，它将与之前注册的函数解除绑定（例如忘记它们）。因此，第二次手动调用jQuery.ready()（就像你一样）不会再次触发相同的函数调用。所以你真的不需要在页面上触发后加载的脚本中的包装器，因为它只是立即执行新文档中的代码，因为你的新绑定函数执行然后是未绑定的。