jquery replace html and javascript function

Question

[EDIT: I tried to put only the relevant portion of my code here. I understand that led to confusion. Sorry about that. Here is a snippet I could create causing the same issue. Adding the snippet here:]

Once snippet is loaded, click on the button.

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

I expected to see SIX 6 (or maybe FIVE 5) on clicking the button. But see SIX 5. Interesting that the new function is being called but old value (5) is being used. In my actual code, I had my func() way below where I was calling it and was also calling it in a settimeout(func... ). Trying to understand what is happening.

Answer 1

UPDATE

According to the changes in the question the new problem is the position where you declare the new value for the variable a.

Because:

jQuery(document).ready(function () {

executes the code when document is ready, and because your document is already ready when you substitute the html of hello element, on the first click you get the value 5 and only after you get the new value. From the second time, because the html is changed, when you click you activate just the ready function. The solution is to declare the variable a in the data string immediately before the document ready.

You may use the added button "describe function" to see by yourself the content of the script contained in the hello div.

To better understand I added a string as a parameter to your func function in order to understand how and when it's called.

Updated snippet:

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

I created and tested a possible similiar situation, and it works for me:

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