Question

我试图用HTML中的onChange事件调用一个函数。我正在调用的功能现在是另一个功能的一部分。

当我更改下拉菜单的值时，我没有任何回应。 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

在change处理函数中使用jQuery注册ready处理函数。这样，onchange处理程序可以访问getVat1()。

在$(document).on('click', ...)上方写下：

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

Answer 2

您的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 3

添加了注释，以显示如何将本地函数绑定到新元素。

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

使用onChange调用属于另一个函数的函数

3 个答案: