Javascript jquery中的复选框检查和未检查事件

我的复选框列表中有如下复选框：

<div class="pop-mission-to">
    <label>
        <input class="check-brand" type="checkbox" name="" value="1" data-id="1">
    </label>
</div>

<div class="pop-mission-to">
    <label>
        <input class="check-brand" type="checkbox" name="" value="2" data-id="2">
    </label>
</div>

$('.check-user').click(function() {
    var $this = $(this);
    var user_id = $this.attr('value');
    var brandContainer = $this.closest('.pop-state').siblings('.pop-brands');
    brandContainer.html('<p style="margin: 10px !important;">Processing... </p>');
    $.post('/user/usersBrands', { userId: user_id } , function(data) {
        console.log(data);
        var brands = JSON.parse(data);
        var container = $('<div class="pop-mission-co" />');

        brands.forEach(function (brand, index) {
            var isRegisteredToBrand = null;
            console.log(brand.userId);
            if(brand.userId==null)
            {
                isRegisteredToBrand = false;
             }
            else{
                isRegisteredToBrand = true;
            }
            console.log(isRegisteredToBrand);
            container.append(buildBrand(brand.id, brand.name, isRegisteredToBrand, index));
        });
        function buildBrand(id, name, isActive, index) {
            var isChecked = isActive ? 'checked="checked"' : ' ';
            return $(
                '<div class="pop-mission-to">' +
                    '<label>' +
                        '<input class="check-brand"' +
                            isChecked +
                            'type="checkbox"' +
                            'name=""' +
                            'value="' + id + '"' +
                            'data-id="' + index + '">'
                                + name +
                    '</label>' +
                '</div>'
            );
        }
        brandContainer
            .children('p').remove();
        brandContainer
            .html(container)
            .find('.pop-mission-co').show();
    });
});

但是，当我单击复选框时，什么也没有发生。我做错了什么

编辑，伙计们，我将在$之后创建此HTML。如下所示：

<div class="pop-mission-to">
    <label>
        <input class="check-brand" type="checkbox" name="" value="1" data-id="1">
    </label>
</div>

<div class="pop-mission-to">
    <label>
        <input class="check-brand" type="checkbox" name="" value="2" data-id="2">
    </label>
</div>

$('.check-user').click(function() {
    var $this = $(this);
    var user_id = $this.attr('value');
    var brandContainer = $this.closest('.pop-state').siblings('.pop-brands');
    brandContainer.html('<p style="margin: 10px !important;">Processing... </p>');
    $.post('/user/usersBrands', { userId: user_id } , function(data) {
        console.log(data);
        var brands = JSON.parse(data);
        var container = $('<div class="pop-mission-co" />');

        brands.forEach(function (brand, index) {
            var isRegisteredToBrand = null;
            console.log(brand.userId);
            if(brand.userId==null)
            {
                isRegisteredToBrand = false;
             }
            else{
                isRegisteredToBrand = true;
            }
            console.log(isRegisteredToBrand);
            container.append(buildBrand(brand.id, brand.name, isRegisteredToBrand, index));
        });
        function buildBrand(id, name, isActive, index) {
            var isChecked = isActive ? 'checked="checked"' : ' ';
            return $(
                '<div class="pop-mission-to">' +
                    '<label>' +
                        '<input class="check-brand"' +
                            isChecked +
                            'type="checkbox"' +
                            'name=""' +
                            'value="' + id + '"' +
                            'data-id="' + index + '">'
                                + name +
                    '</label>' +
                '</div>'
            );
        }
        brandContainer
            .children('p').remove();
        brandContainer
            .html(container)
            .find('.pop-mission-co').show();
    });
});

$（'.check user'）。单击（函数（）{
var$this=$（this）；
var user_id=$this.attr（'value'）；
var brandContainer=$this.closest（'.pop state'）。兄弟姐妹（'.pop brands'）；
html（“
处理…
”；
$.post（'/user/usersBrands'，{userId:user_id}，函数（数据）{
控制台日志（数据）；
var brands=JSON.parse（数据）；
变量容器=$（''）；
brands.forEach（功能（品牌、索引）{
var isRegisteredToBrand=null；
console.log（brand.userId）；
if（brand.userId==null）
{
isRegisteredToBrand=false；
}
否则{
isRegisteredToBrand=true；
}
console.log（isRegisteredToBrand）；
container.append（buildBrand（brand.id、brand.name、isRegisteredToBrand、index））；
});
函数buildBrand（id、名称、isActive、索引）{
var isChecked=isActive？'checked=“checked”：“”；
返回$(
'' +
'' +
''
+名字+
'' +
''
);
}
品牌容器
.children（'p'）。remove（）；
品牌容器
.html（容器）
.find（'.pop mission co'）.show（）；
});
});

---

可能是因为HTML是在jquery中的$.post调用后生成的，这就是它不会触发事件的原因？？？

问题是因为您在加载DOM后动态追加元素，所以需要使用委托事件处理程序。还要注意，您应该在复选框上使用

更改
事件，而不是
单击
。试试这个：

$('.check-user').click(function() {
    var $this = $(this);
    var user_id = $this.attr('value');
    var brandContainer = $this.closest('.pop-state').siblings('.pop-brands');

    brandContainer.on('change', '.check-brand', function() {
        alert("Checkbox checked");
    });

    // the rest of your code...
});

问题是因为在加载DOM后动态追加元素，所以需要使用委托事件处理程序。还要注意，您应该在复选框上使用
更改
事件，而不是
单击
。试试这个：

$('.check-user').click(function() {
    var $this = $(this);
    var user_id = $this.attr('value');
    var brandContainer = $this.closest('.pop-state').siblings('.pop-brands');

    brandContainer.on('change', '.check-brand', function() {
        alert("Checkbox checked");
    });

    // the rest of your code...
});

尽管您确实应该为此使用
change
事件，但您的代码在技术上应该是有效的。可能有数百个理由表明它没有这样做。您包括jQuery了吗？是否在document.ready处理程序中运行代码？控制台中有错误吗？是的，我已经包括jQuery。。。我已经在我的其他一些按钮和链接上测试过了，它工作得很好。。。问题可能是因为我是在$.post调用完成后创建此HTML的？如下所示：我得到一个JSON数组。。。然后我以HTML的形式重建它。。。我已经更新了我的问题，让你看看。。你能看一下吗？这种情况下的问题是因为你在加载DOM后附加了元素，所以你需要一个委托事件处理程序。我为您添加了一个答案。虽然您确实应该为此使用
change
事件，但您的代码在技术上应该是有效的。可能有数百个理由表明它没有这样做。您包括jQuery了吗？是否在document.ready处理程序中运行代码？控制台中有错误吗？是的，我已经包括jQuery。。。我已经在我的其他一些按钮和链接上测试过了，它工作得很好。。。问题可能是因为我是在$.post调用完成后创建此HTML的？如下所示：我得到一个JSON数组。。。然后我以HTML的形式重建它。。。我已经更新了我的问题，让你看看。。你能看一下吗？这种情况下的问题是因为你在加载DOM后附加了元素，所以你需要一个委托事件处理程序。我给你加了一个答案嘿Rory一旦勾选了复选框。。。我应该创建一个数组并存储$（this）.val（）的值，并存储选中该项的值。。。如果项目未选中，我应该简单地用该项目更新数组，并在数组中说“未选中”…嘿，Rory，一旦选中复选框。。。我应该创建一个数组并存储$（this）.val（）的值，并存储选中该项的值。。。如果项目未选中，我应该简单地用该项目更新数组，并在数组中说“未选中”。。。