javascript - jquery 替换 html 和 javascript 函数

Question

[编辑:我试着只把我代码的相关部分放在这里。我知道这导致了困惑。对于那个很抱歉。这是我可以创建的导致相同问题的片段。在此处添加代码段:]

加载片段后，单击按钮。

<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... ) 中调用它。试图了解正在发生的事情。

Answer 1

更新

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

因为:

jQuery(document).ready(function () {

在文档准备好时执行代码，因为当您替换 hello 元素的 html 时您的文档已经准备好，第一次点击时您得到值 5只有在你获得新值(value)之后。 从第二次开始，因为 html 发生了变化，当你点击时，你只激活了 ready 功能。 解决方案是在文档就绪之前在数据字符串中声明变量 a。

您可以通过添加的按钮“描述功能”自行查看hello div中包含的脚本内容。

为了更好地理解我在您的 func 函数中添加了一个字符串作为参数，以便了解它是如何以及何时被调用的。

更新的片段:

$(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>