javascript - jquery 选择器复选框

Question

我的页面比较复杂，我相当确定它的 jquery 表现得很奇怪。因此，我将首先添加相关内容，如果有人需要更多信息，请告诉我，我会提供。

前提是有一个div存放关键字气泡。这些气泡有一个工具提示(qTip 插件)，其中包含您可以选择和取消选择的相关信息。有时关键字具有重叠的相关信息，因此当取消选择一个关键字时，需要同时取消选择所有其他关键字。该气泡列表是通过 ajax 动态构建的，并且可以继续实时添加到页面上。

问题是，当我单击某些复选框时，它们不会取消选中，但如果我在另一个工具提示中单击同一个复选框，它就会起作用......现在也可以让原来的复选框正常工作。我不知道为什么有些有效而另一些无效。我认为这与实时 onlick 函数绑定(bind)和/或选择器的编写方式有关。

以下函数根据 json 对象写入工具提示的 html 内容，因此假设该内容在那里。底部的 jquery 代码是我绑定(bind)到复选框的函数。

function constructSpecializationsHTML(data){
    var html = '';
    for(i = 0; i < data.specializations.length; i++){
        if(data.specializations[i].name != ''){
            html += "<span class='is-specialization-line'>";
            html +=     "<input class='is-specialization-checkbox' type='checkbox' name='" + data.specializations[i].name + "' checked='" + isSpecializationChecked(data.specializations[i].name) + "'/>";
            html +=     "<span>" + data.specializations[i].name + "</span>";
            html += "</span><br />"; 
        } else {
            html += "This keyword is not known in our ontology";
        }
    }
    return html;
}

$(document).on("click", ".is-specialization-checkbox", function(){ 
    var $checkboxs = $(".is-specialization-checkbox[name='" + $(this).attr("name") + "']")
    $checkboxs.prop("checked", !$checkboxs.prop("checked"));
});

Answer 1

首先，当点击事件触发时，“checked”属性已经改变，这意味着复选框的状态不同。

改变

!$checkboxs.prop("checked")

至

$(this).prop("checked")

解决了这个问题。

其次，当您仅显示一个工具提示时，您的选择仅返回一个复选框。如果您在选中或取消选中之前显示所有工具提示，它将返回正确的数字。我的猜测是，qTip 在显示工具提示之前不会将其 html 添加到 DOM 中。这就是为什么并非所有类似名称的复选框都被取消选中(至少我认为就是这样!)