0

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

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

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

以下函数基于 json 对象写入工具提示的 html 内容，因此假设内容存在。底部的 jquery 代码是我绑定到复选框的函数。

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"));
});
4

2 回答 2

1

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

改变

!$checkboxs.prop("checked")

至

$(this).prop("checked")

解决了。

其次，当您只显示一个工具提示时，您的选择只会返回一个复选框。如果您在选中或取消选中之前显示所有工具提示，则会返回正确的数字。我的猜测是 qTip 在显示之前不会将工具提示的 html 添加到 DOM。这就是为什么不是所有类似名称的复选框都未选中的原因（至少我认为就是这样！）

于 2012-05-30T22:33:38.900 回答
1 
$(document).on("click", ".is-specialization-checkbox", function(){
    var $checkboxs = $(".is-specialization-checkbox[name='" + $(this).attr("name") + "']")
    $checkboxs.not($(this)).prop("checked", false);
});

更改this为$(this)- 这样，被单击的特定复选框将被排除在取消选择之外。

于 2012-05-30T21:43:40.637 回答