Search code examples
jqueryfunctionexpandexpander

How can I get the expander function to work with dynamic jQuery data?

Thanks for taking a look at this question. I am trying to get the jQuery expander function to work in my UI.

The problem is, it works when the data is hardcoded in the HTML but it does not work when data is dynamically placed by jQuery.

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

SLIDE 1: The UI that contains the small text I am trying to expand in each module shown.

SLIDE 2: The div structure set up for jQuery to populate date in realtime

SLIDE 3: Chrome Inspector showing the data dynamically held in memory (not in the HTML source)

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

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

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

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

Slide 1

Slide 2

Slide 3

Slide 4

EDIT 1 - Here is the new code based on your suggestion to use .live()... It doesn't seem to get called on click:

<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>
Solution

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