Jquery onclick 函数运行多次越来越多

Question

我有一个有趣的问题，我不知道为什么会这样。我有 dataTables 和数据是在选择更改后使用 jquery ajax 发布的。我有多重选择的onclick功能。 （它必须在单击表格时运行，它会更改行样式等。）我注意到（带调试）；当我在第一次加载后单击行时，onclick 按预期工作一次。但是点击第二次加载后（更改选择）运行2次并点击第三次加载后运行3次我不明白发生了什么。所以需要一些帮助。

这是加载表格的选择更改功能；

// in doc.ready
$('#groupSelect').change(function() {
  var group = $('#groupSelect').val();

  if (!$.fn.DataTable.isDataTable('#questTable')) //this is for first load
  {
    GetQuestions(group);
  } else //this is for after first load
  {
    var table = $('#questTable').DataTable();
    table.destroy();
    table.clear().draw();
    GetQuestions(group);
  }
});

这是获取数据的GetQuestions()函数；

// out of doc ready
function GetQuestions(questGroup) {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    url: 'SetAudit.aspx/Questions',
    data: '{"q_group":"' + questGroup + '"}',
    success: function(result) {
      $('#questTable').DataTable({
        data: result.d,
        columns: [{
          data: 'q_id'
        }, {
          data: 'q_text'
        }]
      });


      //this click function runs multiple time at 1 click
      $('#questTable tbody').on('click', 'tr', function() {
        var table = $('#questTable').DataTable();
        var count = table.rows('.selected').count();
        $(this).toggleClass('selected');
        $('#selectedCount').text('' + table.rows('.selected').count() + '');
      });
    }
  });
}

如果我在 ajax 成功函数中创建它是可以的，但它在其他任何地方都不起作用。提前致谢。

Answer 1

问题是因为每次在 #groupSelect 上发生 change 事件时，您都会触发 AJAX 请求，并在该 AJAX 请求的 success 处理程序中附加 另一个 click 事件处理程序到表的tr。因此它们重复。

要解决这个问题，我建议您将tr 事件处理程序移到success 处理程序之外，并且只在加载DOM 时运行一次。试试这个：

function GetQuestions(questGroup) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        url: 'SetAudit.aspx/Questions',
        data: { q_group: questGroup },
        success: function (result) {
            $('#questTable').DataTable({
                data: result.d,
                columns: [
                    { data: 'q_id' },
                    { data: 'q_text' }
                ]
            });
        }
    });
}

// do this on load *only*
$('#questTable tbody').on('click', 'tr', function () {
    var table = $('#questTable').DataTable();
    var count = table.rows('.selected').count();
    $(this).toggleClass('selected');
    $('#selectedCount').text(table.rows('.selected').count());
});

Answer 2

这应该可以工作

 //this click function runs multiple time at 1 click
$('#questTable tbody').off().on('click', 'tr', function() {
  var table = $('#questTable').DataTable();
  var count = table.rows('.selected').count();
  $(this).toggleClass('selected');
  $('#selectedCount').text('' + table.rows('.selected').count() + '');
});

有多种方法可以解决问题。

删除和添加表格 DOM 元素：这取决于您构建数据表格的方式。如果您仅从 JS 构建数据表，那么您可以采用这种方法。

// in doc.ready
$('#groupSelect').change(function() {
  var group = $('#groupSelect').val();

  if (!$.fn.DataTable.isDataTable('#questTable')) {// this is for first load
    GetQuestions(group);
  } else {//this is for after first load
    var table = $('#questTable').DataTable();
    table.destroy();
    table.clear().draw();
    // empty the table which will eventually clear all the event handlers
    $('#questTable').empty();
    GetQuestions(group);
  }
});

结合使用datatable的drawCallback事件和jQueryoff：可以在drawCallback中放置行高亮功能

//out of doc ready
function GetQuestions(questGroup) {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    url: 'SetAudit.aspx/Questions',
    data: '{"q_group":"' + questGroup + '"}',
    success: function(result) {
      $('#questTable').DataTable({
        data: result.d,
        columns: [{
          data: 'q_id'
        }, {
          data: 'q_text'
        }],
        drawCallback: function(settings) {
          //this click function runs multiple time at 1 click
          $('#questTable tbody').off().on('click', 'tr', function() {
            var table = $('#questTable').DataTable();
            var count = table.rows('.selected').count();
            $(this).toggleClass('selected');
            $('#selectedCount').text('' + table.rows('.selected').count() + '');
          });
        }
      });
    }
  });
}

Answer 3

您将绑定添加到.change() 函数中的click 事件。这样您每次都添加一个新绑定，因此对函数的调用次数会增加。

这样做的正确方法是将$('#questTable tbody').on('click', 'tr', function () { 移出GetQuestions。

Answer 4

每次调用$('selector').on('click', ...) 时，您都在注册一个新回调，以便在单击与您的选择器匹配的元素时执行。所以在这种情况下，每次 ajax 调用完成时，您都会注册 另一个 点击处理程序。因此，如果您的 ajax 调用执行了 3 次，您将注册三个相同的点击处理程序，并且它们都会执行。

您应该确保您的$('#questTable tbody').on('click', 'tr', ...) 只执行一次。

Answer 5

您在每个 ajax 请求后添加了新的事件监听器， 从 ajax 回调中移动点击事件

//out of doc ready
function GetQuestions(questGroup) {
	$.ajax({
		type:'POST',
		dataType:'json',
		contentType:'application/json',
		url:'SetAudit.aspx/Questions',
		data: '{"q_group":"' + questGroup + '"}',
		success: function (result) {
			$('#questTable').DataTable({
				data: result.d,
				columns: [
					{ data: 'q_id' },
					{ data: 'q_text' }
				]
			});


		}
	});
}

//this click function runs multiple time at 1 click
$('#questTable tbody').on('click', 'tr', function () {
	var table = $('#questTable').DataTable();
	var count = table.rows('.selected').count();
	$(this).toggleClass('selected');
	$('#selectedCount').text('' + table.rows('.selected').count() + '');
});