我在Datatables列中有一个函数，就像这样
{ 'data': 'status',
'fnCreatedCell': function (nTd, sData, oData, iRow, iCol) {
if ((oData.status == null) && (oData.status.status != '10Stat') && (oData.id > 100)) {
var html = '<span class="tipster text-danger" data-toggle="tooltip" data-placement="top" title="Edit branch"><i class="far fa-edit mx-1 text-secondary zindex-tooltip replaceBranch" onclick="replaceBranch(\''+oData.orderId+'\')"></i></span>';
} else {
var html = '<i class="far fa-edit mx-1 lightgray zindex-tooltip"></i>';
}
$(nTd).html(html);
}, 'defaultContent': ''
},
问题在于，replaceBranch()函数（用onclick调用）在每次单击图标时都会重复一次，即。模态第一次弹出时，ajax调用运行一次，结果是这样。如果单击另一个图标，则弹出模式，ajax调用运行两次，有两个结果。如果单击另一个图标，则弹出模式，ajax调用运行3次，有3个结果。依此类推。
function replaceBranch(order) {
var mainhtml = '<div class="d-flex my-3"><div class="flex-fill"><h5 class="text-secondary text-left">change branch for order '+order+'</h5></div><div class="flex-fill"></div></div><form onSubmit="return false;"><div class="form-group"><select class="custom-select select5" id="change-country"><option value="" selected>Choose a country...</option></select></div>' + '<div class="form-group"><select class="custom-select select5" id="change-region" disabled><option value="" selected>Choose a region...</option></select></div>' + '<div class="form-group"><select class="custom-select select4" id="change-city" disabled><option value="" selected>Choose a city...</option></select></div>' + '<div class="form-group"><select class="custom-select select4 required" id="change-branch" disabled><option value="" selected>Choose a branch...</option></select></div><div class="input-group mb-3"><input id="branch-input" type="text" class="form-control" placeholder="Branch code" value=""><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="branch-load">Find</button></div></div></form>' + '<div id="change-packets-row"></div>';
$.ajaxSetup({
async: true
});
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches",
dataType: "json",
cache: false,
success: function (data) {
$.each(data.countries, function(key, val) {
var html = '<option value="' + key + '">' + val + '</option>';
$(html).appendTo('#change-country');
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
$(document).on('change', '#change-country', function() {
var selectedCountry = $('#change-country option:selected').val();
$("#change-region").prop("disabled", "disabled");
$("#change-region").find('option').not(':first').remove();
$("#change-city").prop("disabled", "disabled");
$("#change-city").find('option').not(':first').remove();
$("#change-branch").prop("disabled", "disabled");
$("#change-branch").find('option').not(':first').remove();
$("#change-result").remove();
if (selectedCountry != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&country="+encodeURIComponent(selectedCountry),
dataType: "json",
cache: false,
success: function (country) {
$.each(country, function(key, value) {
var html = '<option value="' + key + '">' + key + '</option>';
$(html).appendTo('#change-region');
});
$("#change-region").removeAttr("disabled");
console.log(country);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('change', '#change-region', function() {
var selectedRegion = $('#change-region option:selected').val();
$("#change-city").prop("disabled", "disabled");
$("#change-city").find('option').not(':first').remove();
$("#change-branch").prop("disabled", "disabled");
$("#change-branch").find('option').not(':first').remove();
$("#change-result").remove();
var i = 0;
if (selectedRegion != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches®ion="+encodeURIComponent(selectedRegion),
dataType: "json",
cache: false,
success: function (region) {
$.each(region, function(key, value) {
var html = '<option value="' + key + '">' + key;
if (value !== null) {
html += ' (' + value + ')';
}
html += '</option>';
$(html).appendTo('#change-city');
});
$("#change-city").removeAttr("disabled");
console.log(region);
i++;
console.log(i);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('change', '#change-city', function() {
var selectedCity = $('#change-city option:selected').val();
$("#change-branch").prop("disabled", "disabled");
$("#change-branch").find('option').not(':first').remove();
$("#change-result").remove();
if (selectedCity != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&city="+encodeURIComponent(selectedCity),
dataType: "json",
cache: false,
success: function (city) {
city.sort(function(a, b) {
return a.street > b.street;
});
$.each(city, function(key, value) {
var html = '<option value="'+value.id+'">'+value.street+' - '+value.place+'</option>';
$(html).appendTo('#change-branch');
});
$("#change-branch").removeAttr("disabled");
console.log(city);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('change', '#change-branch', function() {
var selectedBranch = $('#change-branch option:selected').val();
$('#change-result').remove();
$('#branch-input').val(selectedBranch);
if (selectedBranch != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&branch="+encodeURIComponent(selectedBranch),
dataType: "json",
cache: false,
success: function (branch) {
var html = '<div class="col mt-2" id="change-result">';
html += '<h5>'+branch.place+'</h5>';
html += '<p>'+branch.street+', '+branch.city+' '+branch.zip+' (Branch '+branch.id+')</p>';
html += '</div>';
$(html).appendTo('#change-packets-row').hide().fadeIn(1000);
Swal.enableConfirmButton();
console.log(branch);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
$(document).on('click', '#branch-load', function() {
var selectedBranch = $('#branch-input').val();
$('#change-result').remove();
if (selectedBranch != '') {
$.ajax({
type: "GET",
url: "http://www.example.com/branches.php?branches&branch="+encodeURIComponent(selectedBranch),
dataType: "json",
cache: false,
success: function (branch) {
var html = '<div class="col mt-2" id="change-result">';
html += '<h5>'+branch.place+'</h5>';
html += '<p>'+branch.street+', '+branch.city+' '+branch.zip+' (Branch '+branch.id+')</p>';
html += '</div>';
$(html).appendTo('#change-packets-row').hide().fadeIn(1000);
Swal.enableConfirmButton();
console.log(html);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
});
Swal.fire({
html: mainhtml,
showCancelButton: true,
confirmButtonText: 'Choose a branch',
cancelButtonText: 'Cancel',
showLoaderOnConfirm: true,
animation: true,
focusConfirm: false,
onOpen: function () {
Swal.disableConfirmButton();
$('.select4').select2({
theme: 'bootstrap4',
minimumResultsForSearch: 20
});
$('.select5').select2({
theme: 'bootstrap4',
minimumResultsForSearch: Infinity
});
},
preConfirm: function() {
var branch = document.getElementById('branch-input').value;
if (branch) {
$.ajax({
url: 'http://www.example.com/packets.php?changeStore',
type: 'GET',
data: {
orderId: order,
newStoreCode: branch
},
success: function(msg) {
Swal.fire({
title: 'OK',
text: 'Branch changed to '+msg.result,
type: 'success'
});
$('#updateAll').click();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
Swal.fire({
title: 'Error!',
html: errorThrown,
type: 'error',
confirmButtonText: 'Close'
})
}
})
}
},
allowOutsideClick: function() {!Swal.isLoading()}
})
}
replaceBranch()函数位于jQuery(document).ready(function($)外部，因为iirc，该函数放置在内部时不起作用，因为数据表通常晚于DOM加载。
我尝试过
onclick="replaceBranch(\''+oData.orderId+'\'); return false;"
并添加
$(".replaceBranch").unbind("click");
在replaceBranch()函数的开头。都不行。
是什么原因导致ajax调用多次运行？
答案 0 :(得分：2)
更改
var html = '<span class="tipster text-danger" data-toggle="tooltip" data-placement="top" title="Edit branch"><i class="far fa-edit mx-1 text-secondary zindex-tooltip replaceBranch" onclick="replaceBranch(\''+oData.orderId+'\')"></i></span>';
到
var html = '<span class="tipster text-danger" data-toggle="tooltip" data-placement="top" data-orderid="'+oData.orderId+'" title="Edit branch"><i class="far fa-edit mx-1 text-secondary zindex-tooltip replaceBranch" ></i></span>';
然后添加
$("#someStaticContainer").on("click",".tipster",function() {
replaceBranch($(this).data("orderid"))
});
someStaticContainer可能是nTd所在的表
答案 1 :(得分：1)
您在每次单击时都在更改/单击等上绑定新的处理程序，这是错误的。 最终创建了多个处理程序，并不断添加。 所有.on（）应该在函数的外部，在文档中，因此在文档加载时仅被调用一次。