How can I get jQuery.live () and .expander to work together correctly?

Question

I am having trouble getting .expander to work with divs that contain jQuery dynamic data (i.e. after loading the DOM). The user really recommended trying .live (), and it brought me closer to the step, but it creates some weirdness, as shown in the figures below.

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

NOTE. Slides 1-4 are located on my previous question:

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

For slides 5-6 below.

SLIDE 5: A user interface that uses .live () to create an extensible / resettable div in each module

SLIDE 6: Result of clicking several times in a div ... It adds a few link abbreviations

SLIDE 7: A function that uses .live () to redirect jQuery dynamic data

Thanks for any advice you could offer.

Answer 1

Your original answer is incorrect. What you want to do is set up advanced binding after loading the AJAX content, not the click. Here's the pseudo code.

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

What happens is that .expander is called every time you click on a hidden div tag. I'm not sure when you load your dynamic data, but you want to bind the expander once and only once right after setting the content.

If for some reason the AJAX callback function is not available, 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; } });