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綁定函數執行後就會被解除綁定。