CODEWITHSUNDEEP
jqueryjsondomappend
karancan
karancan

Reputation: 2162

jQuery buttonset fails to work when dynamically added to DOM

I make an AJAX call, get back some data in the form of JSON and have no problems accessing the data. Since I get an array of objects back, I iterate through them and manipulate my DOM. The following code shows this iteration:

for (var key in data){
    reg_count++ ;
    attendee_markup += '<tr><td>' + data[key].student_num + '- ' + data[key].fname + ' ' + data[key].lname ;
    attendee_markup += '<td style="text-align: center;"><div class="ui-buttonset">' ;
    attendee_markup += '<input type="radio" id="ws' + data[key].reg_id + '-yes" name="' + data[key].reg_id + '" class="ui-helper-hidden-accessible" value="yes"><label for="ws' + data[key].reg_id + '-yes" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button"><span class="ui-button-text">Yes</span></label>' ;
    attendee_markup += '<input type="radio" id="ws' + data[key].reg_id + '-no" name="' + data[key].reg_id + '" class="ui-helper-hidden-accessible" value="no"><label for="ws' + data[key].reg_id + '-no" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button"><span class="ui-button-text">No</span></label>' ;
    attendee_markup += '</div></td></tr>' ;
}

To initalize the buttonsets I call $('.ui-buttonset').buttonset();

I am using 'attendee_markup' and my string that I later append in to the DOM. Everything works perfectly well, except the button sets. They appear as buttonsets but nothing happens when clicking on them. I see no errors in Chrome console either.

Upvotes: 1

Views: 167

Answers (1)

Erik
Erik

Reputation: 2264

On your 3rd line of code there's a missing </td> at the end. This is probably what's messing up your logic. All you need to do is change 

attendee_markup += '<tr><td>' + data[key].student_num + '- ' + data[key].fname + ' ' + data[key].lname ;

to 

attendee_markup += '<tr><td>' + data[key].student_num + '- ' + data[key].fname + ' ' + data[key].lname + '</td>';
                                                                                                          ^^^^^

Upvotes: 1

Related Questions