Вызывать Jquery Ajax только после редактирования нескольких полей в строке таблицы данных

Question

У меня есть таблица в ASP MVC, где пользователь может вносить изменения в несколько полей в строке, которые являются выпадающими меню.После внесения изменений и удаления пользователем фокуса с этой строки я хочу вызвать AJAX, чтобы сохранить изменения.Моя проблема заключается в том, что вызов AJAX выполняется для каждого внесенного изменения, поэтому для одного ряда выполняется столько вызовов.

//JQUERY

$(function () {

    $(".payroll").on('change',function (e) {

            var ctrl = $(this).closest('tr');

            var empID = ctrl.find("td:first").html();
            var employeeLine1 = ctrl.find("td:nth-child(2)").html();
            var employeeLine2 = $.trim(ctrl.find("td:nth-child(3) span").html());
            
            updatepayroll(empID, employeeLine1, employeeLine2, ctrl);

    });
	
	updatepayrollReallocation = function (empID, employeeLine1, employeeLine2, ctrl) {

	$.ajax({
		
		//Update changes
		
		 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
    <td id="payrollID">1</td>
    
	<td>@Html.DropDownListFor(modelItem => item.employeeLine,(SelectList)ViewBag.employeeLineHeaders,
										   item.employeeLine, new { @class = "payroll", @data_width = "fit" })
	</td>
	<td>@Html.DropDownListFor(modelItem => item.employeeLine2,(SelectList)ViewBag.employeeLine2Headers,
										   item.employeeLine2, new { @class = "payroll", @data_width = "fit" })
	</td>
</tr>

Answer 1

Если вы хотите отправить обратный вызов, когда какой-либо элемент управления внутри строки потерял свой фокус, используйте focusout обработку событий для строки таблицы, как это (предполагается, PayrollGrid - это <table> ID, установленный атрибутом id):

$("#PayrollGrid").on('focusout', 'td', function () {
    $.ajax({
        // do something with AJAX callback
    });
});

Если вы хотите запускать AJAX на основе фокуса DropDownListFor помощников, используйте вместо него класс payroll:

$("#PayrollGrid").on('focusout', '.payroll', function () {
    $.ajax({
        // do something with AJAX callback
    });
});

Также обратите внимание, что вы можете попытаться объявить empID, employeeLine1, employeeLine2 и ctrl переменные вне области действия, затем назначьте их внутри change обработки события и передайте их обратному вызову AJAX при запуске события focusout.