On click not working after appending checkbox elements in jquery

Question

The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.

Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks

Here is my HTML markup:

   <div id="contact_container">
    <div class="contact">
        <div class="contact_checkbox">
             <div class="checkbox_container">
                 <div class="checkbox">
                     <input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
                </div>
             </div>
        </div>
        <div class="contact_info">
            <div class="contact_image">
                <img src="image.jpg" width="50" height="50" alt="Profile Picture">
            </div>
            <div class="contact_name"><span>Caroline Airey</span>
            </div>
       </div>
    </div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
    <label>Message:</label>
    <span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
    <div class="clear"></div>
    <button class="form_button">Add Contact to Network</button>
</div>

Here is my Jquery:

$( ".checkbox" ).click(function() {
    var checked = $('.testing_checkbox:checked').length;
    $('#testing').val(checked);
    if (checked > 0){
        $('#x_message').show(1000);
    }
    else{
        $('#x_message').hide(1000);
    }
});

possible duplicate of In jQuery, how to attach events to dynamic html elements? — xDaevax
– xDaevax, Commented Aug 29, 2014 at 12:48

thickGlass · Accepted Answer · 2014-08-29 12:50:41Z

3

You will need the Parent reference to bind the element properly to jquery try this

$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
    $('#x_message').show(1000);
}
else{
    $('#x_message').hide(1000);
}
});

The parentObj is the div or the html element you've appended the html code with ajax call

answered Aug 29, 2014 at 12:50

thickGlass

5801 gold badge5 silver badges19 bronze badges

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

1 Comment

cwiggo Over a year ago

Thanks, I will mark this as the answer due to the explanation of the parentObj, thats where I was going wrong! I was binding the parent div rather than the element i've appended the html code to. Reputation++

erlingormar · Accepted Answer · 2014-08-29 12:47:17Z

0

Use this jQuery method instead:

$(".checkbox").on("click", function()
{
    // Your code here
});

This will grab clicks from elements that are dynamically added to your page after it initially loads :)

answered Aug 29, 2014 at 12:47

erlingormar

4613 silver badges11 bronze badges

Collectives™ on Stack Overflow

On click not working after appending checkbox elements in jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related