How to apply jQuery extender after dynamically changing div content?

Question

I have a div with some content. The jQuery expander is used for it. After some time, the contents of the div are changed using an ajax call. How can I apply the extender to the div again in jquery.done ()?

$(document).ready(function(){ $('div.expandable').expander({ slicePoint: 200, preserveWords: true, widow: 4, expandText: 'continue reading', detailClass: 'expanderDetails', afterExpand: function(){ $('#mybutton').click(); //simulate a different click. } }); 

The content of div.expandable is changed using an ajax request. As soon as this happens, I lose the functionality of the "Details". I want to apply the expander effect to a div on request.done (). How to achieve this? Just doing this does not work:

 $('div.expandable').expander(); 

Answer 1

First you have to transfer your expander code to a function:

 function initExpander() { $('div.expandable').expander({ slicePoint: 200, preserveWords: true, widow: 4, expandText: 'continue reading', detailClass: 'expanderDetails', afterExpand: function(){ $('#mybutton').click(); //simulate a different click. } }); } 

Then you can use this function every time you need to initialize the expander, for example, after loading the DOM:

 $(document).ready(function() { initExpander(); }); 

Or immediately after calling ajax:

 $.ajax({ url: '/doajax', // .... your ajax request here success: function () { initExpander(); } }); 

If you use done () with ajax, this is good too:

 $.ajax({ url: '/doajax', // .... your ajax request here }).done(function () { initExpander(); }); 

Hope this helps;)