Checkbox check and unchecked event in jquery

Question

I have checkboxes in my checkbox list like following:

<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>

I have created a on click function in jQuery like this, just to check if its gonna react or anything:

$('.check-brand').click(function() {
    alert("Checkbox checked");
});

However when I click the checkbox nothing happens. What am I doing wrong?

Edit, guys I'm creating this HTML after $.Post like following:

$('.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();
    });
});

Perhaps the fact because the HTML is generated after $.post call in jquery, that's the reason why it doesn't triggers the event??

Although you should really use the change event for this, your code should technically be working. There could be hundreds of reasons that it does not. Have you included jQuery? Are you running your code in a document.ready handler? Are there any errors in the console? — Rory McCrossan
– Rory McCrossan, Commented Jun 8, 2016 at 8:32
Yes I've included jQuery... I've tested it out on some of my other buttons and links and it works just fine... Maybe the problem is because I'm creating this HTML after $.post call is done? Like following: I get a JSON array... And then I reconstruct it in form of HTML ... I've updated my question for you to see.. Can u look at it please? — perkes456
– perkes456, Commented Jun 8, 2016 at 8:35
The issue in that case is because you append the element after the DOM has been loaded, so you need a delegated event handler. I added an answer for you. — Rory McCrossan
– Rory McCrossan, Commented Jun 8, 2016 at 8:43

Rory McCrossan · Accepted Answer · 2016-06-08 08:42:53Z

2

The issue is because you are appending the element dynamically after the DOM has been loaded, so you need to use a delegated event handler. Also note that you should use the change event on checkboxes, not click. Try this:

$('.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...
});

answered Jun 8, 2016 at 8:42

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

perkes456 Over a year ago

Hey Rory, once the checkbox is checked... I should create an array and store the value of the $(this).val() and store the value that the item is checked... If the item is unchecked, I should simply update the array with that item and say "unchecked" in the array...

Collectives™ on Stack Overflow

Checkbox check and unchecked event in jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related