Question

I have been having issues with getting .expander to work with divs that contain dynamic jQuery data (i.e. after the DOM is loaded). A user did recommend trying .live() and that has gotten me a step closer but it is creating some weirdness as illustrated in the images below.

I refer to a separate question in which https://stackoverflow.com/users/830804/eric suggested that I try .live():
How can I get the expander function to work with dynamic jQuery data?

NOTE: Slides 1-4 are located at my previous question here:

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

For Slides 5-6 see below.

SLIDE 5: The UI that uses .live() to create an exandable/collapsable div in each module

SLIDE 6: The result of clicking several times on the div… It adds multiple collapse links

SLIDE 7: The function that uses .live() to target dynamic jQuery data

Thanks for any advice you could offer.

Answer 1

Your initial answer is wrong. What you want to do is set up an expanded binding once the AJAX content is loaded, not on click. Here’s pseudo code.

$.get('...' function(d) {
    $('#dynamiclongp').text(d).expander(...);
});

What’s happening is that .expander is getting called every time you click on the tags-hidden div. I’m not sure when you’re loading in your dynamic data, but you want to bind expander once, and only once, right after you set the content.

If, for some reason, the AJAX callback function is not accessible, just make sure that you only bind your event once.

var bound = false;
$('div.tags-hidden').live('click', function() {
    if(!bound) {
        $(this).find('p').expander(...);
        bound = true;
    }
});