jQuery on a dynamically (PHP) created checkbox

Question

I have a drop-down that's populated with database records along with a button for displaying each record's information via an AJAX call to a processing page. If the record's 'approval' database field is true, the check box is displayed as checked, if not, it's unchecked. Up to this point, everything works fine.

My problem is not being able to use a jQuery selector on the dynamically generated check box. When the checkbox is changed, nothing happens--no console logs or anything.

I haven't re-factored my code to avoid repetition/etc, so please excuse the sloppiness:

PHP (returned code through AJAX call):

if($approved) {
    echo '<p><strong>Approved: </strong>';
    echo '<input type="checkbox" id="checkbox_unapprove" checked>';
    echo '</p>';
} else {
    echo '<p><strong>Approved: </strong>';
    echo '<input type="checkbox" id="checkbox_approve">';
    echo '</p>';            
}

Portion of my jQuery:

$('#checkbox_approve').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges0 option:selected').attr('id');
    alert(dropdown_id);
});


$('#checkbox_unapprove').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges1 option:selected').attr('id');
    alert(dropdown_id);
});

I'm thinking that jQuery can't access #checkbox_approve or #checkbox_unapprove because they're not loaded into the DOM upon page load. Is this correct?

possible duplicate of I can't access the keys of checkbox with javascript when I generate the checkbox dynamically -- Seriously, this nearly-identical question was asked less than an hour ago. — Blazemonger
– Blazemonger, Commented Oct 21, 2013 at 15:20
Yes, check the documentation for .on() - Direct and delegated events — billyonecan
– billyonecan, Commented Oct 21, 2013 at 15:20
Even though I completely agree with the use of ".on()" as suggested, I don't understand why you're using a different ID for a checkbox that means the same thing, it simply has a different state, i.e. #checkbox_approve:checked == #checkbox_unnaprove and vice versa. P.S. also the checkboxes are missing a name attribute — Tsanyo Tsanev
– Tsanyo Tsanev, Commented Oct 21, 2013 at 15:26

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-21 15:21:22Z

2

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).on('change','#checkbox_approve',function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges0 option:selected').attr('id');
    alert(dropdown_id);
});

Syntax

$( elements ).on( events, selector, data, handler );

answered Oct 21, 2013 at 15:21

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

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

1 Comment

Tim Aych Over a year ago

ah! I had tried using .on but with $('#checkbox_approve').on('click', ) before. This works now. Thank you!!! Will mark correct as soon as I'm allowed to.

Bibear · Accepted Answer · 2013-10-21 15:25:28Z

0

instead of binding your event in a $(document).ready() put it all on a standard function

function onDocumentLoad() {
$('#checkbox_approve').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges0 option:selected').attr('id');
    alert(dropdown_id);
});


$('#checkbox_unapprove').change(function(){
    console.log('clicked');
    var dropdown_id = $('#exchanges1 option:selected').attr('id');
    alert(dropdown_id);
});
}

SO you can call this function in the $(document).ready(); and also after your AJAX script has added content to the page. therefor you events will be properly binded to your new added elements

answered Oct 21, 2013 at 15:25

Bibear

699 bronze badges

Collectives™ on Stack Overflow

jQuery on a dynamically (PHP) created checkbox

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