JQuery Accordion is not loading dynamically through ajax -

updated: creating jquery accordion dynamically populated ajax data. accordion created on left side bar:

when new record has been created has been added in accordion data disturbs accordion can see below image in left side bar:

and when refresh page every thing looks fine first image. requirement not refresh page , make accordion work. note: put alerts accordion calling , alerts displaying more 3 times unexpectedly. how can restrict calling ? if may restrict calling problem resolved ! or suggest me bind div on load function/event may run binned function accordingly
go through these 2 questions q1 , q2 didn't me out!

here code:

$.ajax({          url: "/categories",          type: 'get',          success: function(data) {            var content = "";              (i = 0; < data.length; i++) {                content += '<label class="categorylables" id="">' + data[i].title + '</label>';                content += '<div>';              content += '<div>';              content += '<ul>';                (j = 0; j < data[i].boards.length; j++) {                  content += '<li>';                content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].boards[j].id + "'>";                      content += data[i].boards[j].name;                content += '</a>';                content += '</li>';              }                content += '</ul>';              content += '</div>';              content += '</div>';              }              alert("1");            $("#category-navigation").html(content);            alert("2");            $('#category-navigation').accordion({              heightstyle: "content",              active: false,              collapsible: true            });           alert("3");          }        });    > html:

<div class="mynavigation">      <div id="category-navigation">        </div>    </div>

when u call jquery accordion on particular element, works adding classes parent , corresponding child elements perform accordion functionality; defined in jquery.

since data dynamic , being loaded ajax request, may case accordion function being called data loaded , unable apply proper classes corresponding elements.

so, solve this, need change code bit:

remove <div id="category-navigation"> html

<div class="mynavigation">    <div id="category-navigation"> <!-- remove div -->     </div> </div> 

and generate dynamically through jquery doing rest of code.

content += '<div id="category-navigation">' (i = 0; < data.length; i++) { ... ... ... } content += '</div>'; 

also, set html of mynavigation instead of #category-navigation. this:

$(".mynavigation").html(content); 

now when you'd apply $('#category-navigation').accordion, work being called after population of dynamic data.