JQuery Select on Dynamically Created Object

Question

Hi I am creating some dynamic

elements here

function loadApiData(){
var url, jqxhr, url2, jqxhr2, status;
for (i = 0; i < 11; i++) {
    url2 = document.URL + 'status/' + i;
    jqxhr2 = $.getJSON(url2, function(data) {
        console.log('API response received');
        //console.log(url2);
        console.log(data);
        status = data['status'];
        //console.log(status);
        if (status == false) {
            //$('#false').append('<p class="p2" id="' + data['phone'] + 'on">' + data['phone'] + ' phone Status: ' + status + '<p>');
            $('#false').append('<p class="p2" id="' + data['phone'] + 'on">' + data['phone'] + ' phone Status: <input type="button" id="' + data['phone'] + 'off" value="' + status + '" /><p>');
        } else {
            $('#true').append('<p id="' + data['phone'] + 'off">' + data['phone'] + ' phone Status: ' + status + '<p>');
        }
    });
}

};

However when I then try loading them later

function loadWindowSystem() {
 $('#Nimoff').click(function() {
    alert('hi');
});
};

I find that it doesn't actually register the click event.

My document.ready() looks like this.

$(document).ready(function(){
loadApiData();
loadWindowSystem();
});

Any help would be greatly appreciated. Thanks

Resolved by using

$( document ).on( 'click', '#Nimoff', function () { // you code });

Try using `$('#Nimoff').on('click', function() { alert('hi');});` — Rakesh_Kumar, Apr 10 '15 at 07:27
`$( document ).on( 'click', '#Nimoff', function () { // you code });` — ozil, Apr 10 '15 at 07:36
Thanks @ozil can you make your answer an answer so I can mark it as correct, yours did the tick. — Nim, Apr 10 '15 at 07:40

Sougata Bose · Answer 1 · 2015-04-10T07:35:22.460

0

Try to bind the event -

$('#false').append('<p class="p2" id="' + data['phone'] + 'on">' + data['phone'] + ' phone Status: <input type="button" id="' + data['phone'] + 'off" value="' + status + '" /><p>').bind('click', function() {
    alert('hii');
});

Or try with -

$('#Nimoff').on('click', function() {  ............ //code here })

edited Apr 10 '15 at 07:35

answered Apr 10 '15 at 07:29

Sougata Bose

31,517
8
49
87

JQuery Select on Dynamically Created Object

1 Answers1