Jquery 多次更改事件触发
我有一个用户列表，其中填充了查询中的Coldfusion cfloop。每个用户行都有一个按钮，可以单击该按钮调用模式。在该模式中，是一个可以打开和关闭的权限列表。我使用CSS3翻转开关复选框进行切换。这些值是通过ajax调用填充的 问题 当用户单击用户行按钮来调用模式并触发ajax调用时，一切都很好。用户可以翻转开关，触发每个权限更新的ajax调用。当用户单击另一个用户行时，将调用该模式并触发另一个ajax调用。当用户翻转一个开关时，它会触发两个ajax调用，而不是一个。这是第一个问题。这是代码 JQUERYJquery 多次更改事件触发,jquery,ajax,css,Jquery,Ajax,Css,我有一个用户列表，其中填充了查询中的Coldfusion cfloop。每个用户行都有一个按钮，可以单击该按钮调用模式。在该模式中，是一个可以打开和关闭的权限列表。我使用CSS3翻转开关复选框进行切换。这些值是通过ajax调用填充的 问题 当用户单击用户行按钮来调用模式并触发ajax调用时，一切都很好。用户可以翻转开关，触发每个权限更新的ajax调用。当用户单击另一个用户行时，将调用该模式并触发另一个ajax调用。当用户翻转一个开关时，它会触发两个ajax调用，而不是一个。这是第一个问题。这是代
// 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);
}
});
}
}
});
这很有效，但我认为这可能引发了另一个问题。现在只有一个更新调用被触发，但是当调用另一个用户行时，被切换的CSS3开关不会更新。这就好像已经解除了束缚，没有能力再被束缚。这很奇怪，因为切换是纯CSS3的，所以我只能认为是元素从DOM中消失了。我希望这是有意义的。复选框可以在HTML标记中选中
属性
这只是将true
值传递给元素的checked
属性，该属性是布尔值
因此，所有显示checked=“checked”
的标记都是错误的，因为预期的值是布尔值
这其实并不重要，因为无论试图传递什么字符串值，如果属性都存在，那么属性将是true
。如果不存在，则为false
简而言之，复选框的真正正确标记是：
<input type="checkbox" checked>
或者在香草JS中：
// Check:
element.checked = true;
// Uncheck:
element.checked = false;
我无法重现这个问题，因为大多数标记都是由无法访问的JSON生成的。。。但我可以说的是，：复选框
不是有效的选择器。也许你想要[type='checkbox']
？是的。。。。它是一个真正的绑定应用程序，我无法访问api。我使用：复选框来限制代码长度。在这个例子中，为了简洁起见，我只展示了3个权限。大约有15个。所以你认为我需要去掉那些缩写代码…嗯。除非另有解决办法，否则我将尝试一下。谢谢你，卢伊斯。好的。。。关于复选框。。。如果这毕竟是个问题<代码>$（“#权限”）.removeAttr（'checked'）是失败的。该属性仅用于在加载时向DOM提供值。之后，您必须更改属性：$（'#permission'）.prop（'checked'，false）将起作用。您是否更改了$（'#purchasing'）.attr（'checked'，'checked'）用于$（'#采购'）.prop（'checked'，true）？——这是同样的逻辑。。。要更改选中状态，您必须更改**属性。就是这样！已修复它。如果您要创建答案，我将将其作为答案进行检查。谢谢！
$('#permission_modal').off('change', ':checkbox').on('change', ':checkbox',function() {
<input type="checkbox" checked>
// Check:
$(element).prop("checked",true);
// Uncheck:
$(element).prop("checked",false);
// Check:
element.checked = true;
// Uncheck:
element.checked = false;