jQuery buttonset fails to work when dynamically added to DOM

Question

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.

removed my answer as it wasnt helping at all. Have to think fresh one in the morning. — Tom
– Tom, Commented Sep 16, 2012 at 0:42

Erik · Accepted Answer · 2012-09-17 13:48:05Z

1

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>';
                                                                                                          ^^^^^

answered Sep 17, 2012 at 13:48

Erik

2,2641 gold badge20 silver badges20 bronze badges

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

1 Comment

karancan Over a year ago

That is definitely a mistake but even without that, it turns out that the browser is adding the closing </td>. It doesn't seem to have any impact on the button set either.

Collectives™ on Stack Overflow

jQuery buttonset fails to work when dynamically added to DOM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related