我有一个用户列表，其中填充了来自查询的 Coldfusion cfloop。每个用户行都有一个按钮，可以单击该按钮调用模式。在该模式中是一个可以打开和关闭的权限列表。我正在使用 CSS3 翻转开关复选框进行切换。这些值是通过 ajax 调用填充的。
问题
当用户单击用户行按钮以调用模式并触发 ajax 调用时，一切正常。用户可以翻转触发 ajax 调用的开关更新每个权限。当用户单击另一个用户行时，将调用模式并触发另一个 ajax 调用就好了。当用户按下一个开关时，它会触发 2 个 ajax 调用而不是一个。这是第一个问题。这是代码。
JQUERY
// PERMISSIONS MODAL
$(function() {
$('.tbody_permissions').on('click', 'button[class*=permissions_]', function () {
var permissions_id = $(this).attr("id");
$.getJSON({
type: "POST",
url: "cfc/cfc_Permissions.cfc?method=func_get_person_permissions&returnformat=json",
dataType: "json",
data: {
person_id: permissions_id,
contract_id: '<cfoutput>#permissions_contract#</cfoutput>',
project_id: '<cfoutput>#permissions_project#</cfoutput>',
company_id: '<cfoutput>#permissions_company#</cfoutput>',
},
cache: false,
success:function(data_req) {
if(data_req && data_req.length) { // DO SOMETHING
$.each(data_req, function(i, val) {
var message_type_req = data_req[i].message_type;
var user_id_req = data_req[i].user_id;
var firstname_req = data_req[i].firstname;
var lastname_req = data_req[i].lastname;
var image_req = data_req[i].image;
var permission_req = data_req[i].permission;
var purchasing_req = data_req[i].purchasing;
var timekeeping_req = data_req[i].timekeeping;
// *** SUCCESS ***
if(message_type_req == "SUCCESS" || message_type_req == "NONE") { // DO SOMETHING
$('#permission_user_id_modal').val(user_id_req);
$('#permission_name').replaceWith("<h6 class='modal-title' id='permission_name'>" + firstname_req + ' ' + lastname_req + "</h6>");
$('#permission_image').replaceWith("<div id='permission_image'><img src='" + image_req + "'></div>");
if (permission_req == 1){
$('#permission').attr('checked', 'checked');
$('#permission').val(1);
} else {
$('#permission').removeAttr('checked');
$('#permission').val(0);
};
if (purchasing_req == 1){
$('#purchasing').attr('checked', 'checked');
$('#purchasing').val(1);
}else{
$('#purchasing').removeAttr('checked');
$('#purchasing').val(0);
};
if (timekeeping_req == 1){
$('#timekeeping').attr('checked', 'checked');
$('#timekeeping').val(1);
}else{
$('#timekeeping').removeAttr('checked');
$('#timekeeping').val(0);
};
// Submit switch form data
$('#permission_modal').on('change', ':checkbox',function() {
var switched_id = $(this).attr("id");
var switched = $('#' + switched_id).val();
if (switched == 1){
$('#' + switched_id).val(0);
//console.log("switched_id: #" + switched_id);
//console.log("switched off: " + switched);
if (switched_id == 'permission'){
$('input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
$(this).trigger('click');
$(this).removeAttr('checked');
}
});
}
}else{
$('#' + switched_id).val(1);
//console.log("switched_id: #" + switched_id);
//console.log("switched on: " + switched);
};
var update_user = $('#permission_user_id_modal').val();
var contract_id_update = "<cfoutput>#permissions_contract#</cfoutput>";
var project_id_update = "<cfoutput>#permissions_project#</cfoutput>";
var company = "<cfoutput>#permissions_company#</cfoutput>";
var permission = $('#permission').val();
var purchasing = $('#purchasing').val();
var timekeeping = $('#timekeeping').val();
$.ajax({
type: "POST",
url: "cfc/cfc_Permissions.cfc?method=update_person_permissions&returnformat=json",
dataType: "json",
data: {
contract_id: contract_id_update,
project_id: project_id_update,
person_id: update_user,
company: company,
permission: permission,
purchasing: purchasing,
timekeeping: timekeeping
},
cache: false,
success:function(data_update) {
if(data_update && data_update.length) { // DO SOMETHING
$.each(data_update, function(i, val) {
// SUCCESS
if(data_update[i].message_type == "SUCCESS") { // DO SOMETHING
/*
var message_type = data_update[i].message_type;
var permission_res = data_update[i].permission;
var purchasing_res = data_update[i].purchasing;
var timekeeping_res = data_update[i].timekeeping;
*/
// *** FAIL ***
} else if(data_update[i].message_type == "FAIL"){ // DO SOMETHING
html += "<div class='alert alert-danger'><strong>Ooops:</strong> <em>" + message + "</em></div>";
$('.messagenote_settings').html(html);
}
});
}
}
});
return false;
});
// *** FAIL ***
} else { // DO SOMETHING
$('#error').val(messagenote);
}
});
}
}
});
HTML 1 个复选框翻转开关示例
<tr>
<td>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox purchasing" id="purchasing" value="1" checked="checked">
<label class="onoffswitch-label" for="purchasing">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
<td>
purchasing
</td>
<td>
<p class="small">
access to purchasing
</p>
</td>
</tr>
绑定(bind)问题的解决方案
所以如果我理解这个问题，我已经添加了 .off() 来取消绑定(bind)更改事件。这就是我所做的。我换了
$('#permission_modal').on('change', ':checkbox',function() {
与
$('#permission_modal').off('change', ':checkbox').on('change', ':checkbox',function() {
效果很好，但我认为这可能会导致另一个问题。现在只有一个更新调用被触发，但是当调用另一个用户行时，切换的 CSS3 开关不会更新。就好像已经解除了束缚，没有能力再次束缚。这很奇怪，因为切换是纯 CSS3，所以我只能认为它是元素从 DOM 中消失了。我希望这是有道理的。
最佳答案
复选框可以在 HTML 标记中具有 checked 属性。
那只是将 true 值传递给元素的 checked PROPERTY，这是一个 bool 值。
因此所有显示 checked="checked" 的标记都是错误的，因为期望值是 bool 值。
这并不重要，因为如果属性存在，无论尝试传递的字符串值是什么，该属性都将为 true。如果不存在，则为 false。
简而言之，选中复选框的真正正确标记是:
<input type="checkbox" checked>
现在，这是关于加载属性设置的 HTML 标记。
之后，该属性无法更改，因为标记已经被解析。您必须更改属性。
这样做是这样的:
// Check:
$(element).prop("checked",true);
// Uncheck:
$(element).prop("checked",false);
或者在原生 JS 中:
// Check:
element.checked = true;
// Uncheck:
element.checked = false;
关于jquery - 更改事件触发不止一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48370773/