jqueryのは、HTMLとJavaScriptの機能

Question

[EDITを交換してください。私はそれが混乱につながったことを理解しています。申し訳ありません。同じ問題を引き起こすようなスニペットを作っています。ここでスニペットを追加する：]スニペットがロードされ

たら、ボタンをクリックします。

<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）を参照すると予想。しかし、SIX 5を見てください。興味深いことに、新しい関数が呼び出されていますが、古い値（5）が使用されています。私の実際のコードでは、私はfunc（）メソッドを呼び出していましたが、settimeout（func ...）で呼び出していました。起こっていることを理解しようとしています。

Answer 1

UPDATE

は、問題の変化によると、新たな問題は、変数の新しい値を宣言する位置です。

ので：文書の準備ができているとき

jQuery(document).ready(function() { 

は、コードを実行し、あなたのドキュメントは、ハロー要素のHTMLを置き換えたときに、最初にあなたが値5を取得する]をクリックし、既に準備であるため、あなたが新しい価値を得た後でなければなりません。 2回目からは、htmlが変更されているため、クリックするとレディ機能だけがアクティブになります。 解決策は、ドキュメントの準備が整う直前にデータ文字列に変数aを宣言することです。

は自分でハロー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>

私が作成してテスト可能似状況を、そしてそれは私の作品：

$(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の解析とページ上の新しいスクリプトの実行と関係があります。ファンクション実行時に、新規ドキュメント準備がファンクションの実行をトリガすると、OLD値はそのまま残ります。細部へ

、これらは

（おおよそ）

1. 新しいコードは（その中にSIXで）新しいものとOLD機能を置き換える（Javascriptので解析された）場所に置かれます順序で発生次に、新しいドキュメント準備トリガ（まだ場所（5 OLD a値を使用して新しい関数を呼び出す）
2. は、a値は6の新しい値に置き換えられます（新しい値でそれ以上の通話が
を実行されません

ここをクリックしてスニペットをどのように変更しましたか？あなたのコードに2つのalert('a:'+a);\を追加しました。 NOW実行すると、アラートのシーケンスが表示されます。

2番目のアラートは、変更後にアラートします。

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()を手動で（あなたのように）呼び出しても、同じ関数呼び出しが再度トリガされることはありません。したがって、新しいバウンド関数が実行されてからアンバインドされているため、新しいドキュメント内のコードをただちに実行するだけで、ページで実行された後に読み込まれたスクリプトにそのラッパーが本当に必要なわけではありません。