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](http://stackoverflow.com/questions/19497198/i-cant-access-the-keys-of-checkbox-with-javascript-when-i-generate-the-checkbox) -- Seriously, this nearly-identical question was asked less than an hour ago. — Blazemonger, Oct 21 '13 at 15:20
Yes, check the documentation for [`.on() - Direct and delegated events`](http://api.jquery.com/on/#direct-and-delegated-events) — billyonecan, Oct 21 '13 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, Oct 21 '13 at 15:26

score 2 · Accepted Answer · answered Oct 21 '13 at 15:21

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 '13 at 15:21

Tushar Gupta - curioustushar

58,085
24
103
107

1

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. – Tim Aych Oct 21 '13 at 15:25

score 0 · Answer 2 · answered Oct 21 '13 at 15:25

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

jQuery on a dynamically (PHP) created checkbox

2 Answers2