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

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

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

在$(document).on('click', ...)上面写下以下内容：

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

Answer 2

您的count变量不是全局的，因此您无法在getVat1()函数下访问count您的数据将如下所示：

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