How can I make the extension function work with jQuery dynamic data?

Question

Thanks for looking at this question. I am trying to get the jQuery extension function to work in my interface.

The problem is that it works when data is hard-coded in HTML, but it does not work when data is dynamically placed by jQuery.

I created 4 slides to better illustrate the problem (see below for images):

SLIDE 1: A user interface containing small text that I am trying to deploy in each module shown.

SLIDE 2: Div structure configured for jQuery to populate a real-time date

SLIDE 3: Chrome inspector containing data dynamically stored in memory (not in HTML source)

SLIDE 4: The extension function works when I hardcode this in HTML:

<div class="tags-hidden"><p>some data...</p></div> 

Here is the beginning of the expander function: http://plugins.learningjquery.com/expander/

Many, many thanks for any help or advice you could offer. Here are the slides:

EDIT 1 - Here is the new code based on your assumption of using .live () ... It does not seem to get called when pressed:

 <script type="text/javascript"> $(document).ready(function() { $('.div.tags-hidden p').live('click', function() { $('div.tags-hidden p').expander({ slicePoint: 80, // default is 100 expandText: '[...]', // default is 'read more...' collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing userCollapseText: '[^]' // default is '[collapse expanded text]' }); }); </script> 

Answer 1

I think you need to use .live () for elements that are not displayed when rendering the page. Take a look here http://api.jquery.com/live/

Answer 2

You may have to reconnect the expander plugin after downloading your content. If you load your content dynamically through ajax calls, for example, you will need to call $('div.tags-hidden p').expander() again after the ajax download is complete.