Question

我有一个项目列表，我想在选择其中一个项目时执行某些操作，但问题是复选框的更改功能不适用于我。

我已经检查了函数内部的代码，并且它在change事件之外正常工作。我不确定它为什么不能正常工作，但除了它自身的功能之外还有什么呢？

这里有改变功能：

$("input[name='checkCoResult']").change(function () {
     if (this.checked) {
        $("#searchResultSecond").attr("style", "opacity: 0.6");
        $("#searchResultSecond *").attr("disabled", "disabled").off('click');
     }

});

这是生成我的列表的代码：

$.ajax({
        url: "CCDMSWebService.asmx/getCoSearchResult",
        data: JSON.stringify(objectData),
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
             var Result = response.d;
                 contantDiv.text("");
        $.each(Result, function (index, val) {
            contantDiv.append('<div  class="panel-bod"><label style="margin:2px; border-radius: 10px;border: 1px solid #cc0000;padding: 5px;"><input type="checkbox" value="' + val.companyID + '" name="checkCoResult" class="nnn"> '
        +'<img src="images/' + val.companyID + '.png" alt="company logo" width="30%" height="30%">' + val.companyName + ' provides all your needs</label></div>');
           })
        },
        failure: function (msg) {
        alert(msg);
       }
    });

Answer 1

您必须添加选择器参数，否则直接绑定事件而不是委托，这仅在元素已存在时才有效（因此它不适用于动态加载的内容）。在您的情况下，您的页面中似乎已经有一个名为contantDiv的div，因此请修改您的代码，如

contantDiv.on("change","input[name='checkCoResult']",function(){ ...

查看http://api.jquery.com/on/#direct-and-delegated-events了解详情。

Answer 2

如果您的内容是动态的，请尝试

$(document).on("change","input[name='checkCoResult']",function(){
     // your code
});

Answer 3

如果将新HTML注入页面，最好使用委托事件来附加事件处理程序。

委派事件的优势在于，他们可以处理来自稍后添加到文档的后代元素的事件。

$(staticAncestors).on(eventName, dynamicChild, function() {});

Checkbox jquery更改功能不起作用且没有错误

3 个答案: