jquery replace html и javascript function

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() ниже, где я его называл, и также вызывал его в настройке (func ...). Попытка понять, что происходит.

Answer 1

UPDATE

В соответствии с изменениями в вопросе новой проблемой является положение, в котором вы объявляете новое значение переменной а.

Потому что:

jQuery(document).ready(function() { 

выполняет код, когда документ будет готов, а потому, что ваш документ уже готов, когда вы заменяете HTML, Хеллоу элемента, на первый клик вы получите значение 5 и только после того, как вы получите новое значение. Во второй раз, поскольку 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 и выполнением нового скрипта на странице. Когда выполнение функции, когда готовый документ NEW запускает выполнение func, значения OLD все еще на месте.

Чтобы подробно, это происходит в последовательности (примерно)

1. Новый код получает поставить на место (разобранной на Javascript) замена старой функции с новым (с SIX в нем)
2. Новый документ готовы триггера (Вызов новой функции с OLD a значения по-прежнему на месте (5)
3. Затем значение a заменяются новым значение 6 (без каких-либо дополнительных вызовов с новым значением выполняется

См. Здесь, как я изменил фрагмент. Я добавил два кода: alert('a:'+a);\. NOW выполнить его an вы видите последовательность предупреждений:

SECOND предупреждает о 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, готового с момента выполнения вашей новой связанной функции, затем является несвязанной.