jquery替换html和javascript函数答案

【问题标题】：jquery replace html and javascript functionjquery替换html和javascript函数
【发布时间】：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 标签才能解决此问题。如果您可以在小提琴中重现此内容，我很乐意向您展示解决方案

标签： javascript jquery html ajax innerhtml

【解决方案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()（就像你一样）不会再次触发相同的函数调用。所以你真的不需要在页面上触发后加载的脚本中的包装器，因为它只是立即执行新文档中的代码，因为你的新绑定函数执行然后是未绑定的。

【讨论】：