Вызов функции, которая является частью другой функции с помощью onChange

Question

Я пытаюсь вызвать функцию с событием onChange в HTML.Функция, которую я вызываю, теперь является частью другой функции.

Когда я изменяю значение выпадающего меню, я не получаю никакого ответа.Событие onChange не может вызвать функцию, которая находится в другой функции.

Сценарий работает, когда я отделяю вторую функцию от первой функции.Но работать так не для меня.

Кто-нибудь знает правильный способ вызова функции с событием onChange?

Событие onChange находится в строке 12.

Вот мой сценарий:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var final_total_amt = $('#final_total_amt').text();
    var count = 1;

    $(document).on('click', '#add_row', function(){
      count++;
      $('#total_item').val(count);
      var html_code = '';
      html_code += '<div id="row_id_'+count+'">';
      html_code += '<select name="vat1()" id="vat1'+count+'" onChange="getVat1(this.value)"><option value="0">Test</option><option value="1">Test</option></select>';
      html_code += '</div>';

      $('#test').append(html_code);

    });

    function getVat1() {
      jQuery.ajax({ 
        url: './get/get1.php', 
        method: 'POST', 
        data: {'id' : jQuery('#vat1'+count+'').val()},
        success: function(response){ 
          jQuery('#percentage'+count+'').val(response);
        }, 
        error: function (request, status, error) { 
          alert(request.responseText); 
        }, 
      });                   
    }
  });
</script>

Answer 1

ваша count переменная не является глобальной, поэтому вы не можете получить доступ к count под вашей getVat1() функцией, ваши данные будут выглядеть так:

{'id' : jQuery('#vat1').val()}

если вы измените свой код следующим образом, я думаю, чтобудет работать (я не тестировал):

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
     var count = 1;
      $(document).ready(function(){
        var final_total_amt = $('#final_total_amt').text();
});


 $(document).on('click', '#add_row', function(){
          count++;
          $('#total_item').val(count);
          var html_code = '';
          html_code += '<div id="row_id_'+count+'">';
          html_code += '<select name="vat1()" id="vat1'+count+'" onChange="getVat1(this.id)"><option value="0">Test</option><option value="1">Test</option></select>';
          html_code += '</div>';

          $('#test').append(html_code);

        });
        function getVat1(id) {
          $.ajax({ 
            url: './get/get1.php', 
            method: 'POST', 
            data: {'id' : $('#'+id).val()},
            success: function(response){ 
            var percantageName = id.Replace("vat1","percentage");
              $('#'+percantageName).val(response);
            }, 
            error: function (request, status, error) { 
              alert(request.responseText); 
            }, 
          });                   
        }
    </script>

Answer 2

Комментарии добавлены, чтобы показать, как вы можете связать локальную функцию с новыми элементами.

$(document).ready(function() {
  var final_total_amt = $('#final_total_amt').text();
  var count = 1;

  $(document).on('click', '#add_row', function() {
    //we can increment the count before we set the value to do it in one step
    $('#total_item').val(++count);
    
    //we can construct a new div with jQuery so we can logically bind
    //on the child select.  using template literals makes this much
    //more readable than string concatenation
    //we can also attach the count as a data element so that the event
    //handler has easy access to it
    var $newDiv = $(`
      <div id="row_id_${count}">
        <select name="vat1()" id="vat1${count}" data-count="${count}">
          <option value="0">Test</option>
          <option value="1">Test</option>
        </select>
      </div>
    `);
    
    //finding the select in the div, we can bind the local function to it
    $newDiv.find('select').on('change', getVat1);
    //finally we append the new element to the page
    $('#test').append($newDiv);
  });

  function getVat1( e ) {
    var count = e.target.dataset.count;
    console.log( `Trying to perform an ajax request for count ${count}` );
/* commented out for the StackOverflow answer
    jQuery.ajax({
      url: './get/get1.php',
      method: 'POST',
      data: {
        'id': jQuery('#vat1' + count + '').val()
      },
      success: function(response) {
        jQuery('#percentage' + count + '').val(response);
      },
      error: function(request, status, error) {
        alert(request.responseText);
      },
    });
*/
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_row">Add Row</button>
Total Amount: <span id="final_total_amt">20.00</span>
Items: <span id="total_item">1</span>
<div id="test"></div>

Answer 3

Зарегистрируйте обработчик change с помощью jQuery внутри функции обработчика ready.Таким образом, обработчик onchange может получить доступ к getVat1().

Над $(document).on('click', ...) напишите это:

$('#test').on('change', '[id^=vat1]', getVat1);