Question

I have a div that I am cloning using jquery, inside this DIV i have 3 tabs set up using jquery tools tabs.

I followed the instructions on this page for multiple tabs: http://bit.ly/w581Xf

But the tabs only seem to work on the first DIV and not on the cloned DIVs

I have it on a testing site here: http://bit.ly/zUlcjZ

Any suggestions on how to make the tabs work on the cloned DIVs would be great! Thanks

Answer 1

You have to call the .tabs builder after the for cycle but inside the success event:

try replacing this as your ajax’s success event:

success  : function (data) {
                            for (var i = 0, len = data.length; i < len; i++) {
                                var $div = $(".venue:first").clone();
                                var $name = data[i].name;
                                //set data
                                $div.find(".name").html(data[i].name);
                                $div.find(".address").html(data[i].address);
                                $div.find(".phone").html(data[i].phone);
                                $div.find(".checkins").html(data[i].checkinsCount);
                                $div.find(".tips").html(data[i].tipCount);
                                $div.find(".mayor").html(data[i].mayor);
                                $div.find(".mayor_photo").html(data[i].mayor_photo);

                                $div.removeAttr("style");

                                //append to main container
                                $("#venues").append($div);
                            }
$("ul.tabs").tabs("> .pane");

                        }

Good luck 😉