Geek Answers Handbook

How to get jQuery.expander to call on boot, not just on click?

I am having problems with the jQuery.expander function and it is called when the page loads, and I know that this is due to the dynamic filling of data using jQuery.

NOTE. It seems that changing the actual Ajax functions will not be an option.

It was suggested that you try .live (), which worked well, but there are problems with div.tags bindings that are linked again and again.

Then it was suggested to use the "bound" variable and check to bind div.tags-hidden first and if you did not set the variable to true, which actually disables .expander for any other div.tags-hidden.

So there are actually two problems that I would be grateful for any advice:

1) .expander function is not called until click

2) The hidden div.tags that the user clicks first is the only one that has the .expander function.

The slides below hopefully illustrate this better (see below for images).

SLIDE 1: When loading .expander function does not kick

SLIDE 2:. An expander only happens when a click occurs.

SLIDE 3: The current function to call .expander (see code below). This includes variable bound = false. This is recommended when using .live (), but it causes problems.

SLIDE 4: Returning to the user interface, these two modules contain many tags to call .expander but only the first div.tags-hidden click gets this treatment. This is because the "bound" variable is set to false, which forces the expander to process only one div.tags-hidden, the first clicked.

To summarize: How can I get all div.tags-hidden to contain the .expander onload function?

Here is the current jQuery I'm using:

<script type="text/javascript"> var bound = false; $('div.tags-hidden').live('load click', function() { if(!bound) { $(this).find('p').expander({ slicePoint: 50, expandText: '<img src="/images/layout/site/btn_expand.png" alt="Click to Expand Tags" title="Click to Expand Tags">', collapseTimer: 0, userCollapseText: '<img src="/images/layout/site/btn_collapse.png" alt="Click to Collapse Tags" title="Click to Collapse Tags">' }); bound = true; } }); </script>

Here are the slides:

Slide 1

Slide 2

Slide 3

Slide 4

Very grateful for any help with this. Mitch

+4
source share
1 answer

Make sure everything is ready for you before you try to work on it. AKA $ (document) .ready ();

 <script type="text/javascript"> $(document).ready(function(){ var bound = false; $('div.tags-hidden').live('load click', function() { if(!bound) { $(this).find('p').expander({ slicePoint: 50, expandText: '<img src="/images/layout/site/btn_expand.png" alt="Click to Expand Tags" title="Click to Expand Tags">', collapseTimer: 0, userCollapseText: '<img src="/images/layout/site/btn_collapse.png" alt="Click to Collapse Tags" title="Click to Collapse Tags">' }); bound = true; } }); }); </script>
+1
source

More articles:


All Articles