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> 
 
\t jQuery(document).ready(function() { 
 
\t \t 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 = " \ 
 
\t \t Some text2 \ 
 
\t \t <script> \ 
 
\t \t \t jQuery(document).ready(function() { \ 
 
\t \t \t \t func(); \ 
 
\t \t \t }); \ 
 
      var a = 6; \ 
 
\t \t \t function func() { \ 
 
\t \t \t alert('Value is SIX. Integer value: ' +a); \ 
 
\t \t \t } \ 
 
\t \t \t <\/script> "; 
 
\t \t \t 
 
\t $('#mybtn').on('click', function(e) { 
 
\t $('#hello').html(data); 
 
\t }); 
 
</script> 
 

我期望看到SIX 6（或也许FIVE 5）上点击按钮。但请参见第5章。有趣的是，正在使用新函数，但正在使用旧值（5）。在我的实际代码中，我的func（）方法在我调用它的地方下方，并且在settimeout（func ...）中调用它。试图了解发生了什么。

Answer 1

UPDATE

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

因为：

jQuery(document).ready(function() { 

当文件已准备就绪，并执行代码，因为你的文档已经准备当你代替打招呼元素的HTML，就先点击你得到的值5并且只有在你获得新的价值后。 从第二次开始，因为html被改变了，所以当你点击你激活的就绪功能。 解决方案是在文档就绪之前立即在数据字符串中声明变量a。

您可以使用添加按钮“describe function”自己查看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 = " \ 
 
\t \t Some text2 \ 
 
\t \t <script> \ 
 
      var a = 6; /* HERE!!!!!!!!!!!!!!*/\ 
 
\t \t \t jQuery(document).ready(function() { \ 
 
\t \t \t \t func('inside second ready'); \ 
 
\t \t \t }); \ 
 
\t \t \t function func(str) { \ 
 
\t \t \t alert('SECOND: ' + str + ' Value is SIX. Integer value: ' +a); \ 
 
\t \t \t } \ 
 
\t \t \t <\/script> "; 
 

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

我创建并测试一个可能的similiar情况，和它的作品对我来说：

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

Answer 2

这与JavaScript页面上解析和执行新脚本有关。当函数执行时，当NEW文档就绪触发func执行时，OLD值仍然存在。

细节，这些发生在序列（大约）

1. 新代码获取到位（被Javascript解析）用新的（在它与SIX）
2. 取代旧的功能新文档准备触发（调用带OLD a值新函数仍然存在（5）
3. 然后，a值被替换为执行
的6（用新的值没有进一步的呼叫的新的值

请参阅我在这里如何更改片段。我在代码中添加了两个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()不会再次触发相同的函数调用。所以你不需要在脚本被加载后加载的脚本中的包装器，因为它只是立即执行NEW文档中的代码，因为你的NEW绑定函数执行后就会被解除绑定。