开发者

How do I get jQuery .expander to invoke on load and not just on click?

I am having problems with jQuery .expander function and invoking it when the page loads and I know it has to do with the data being dynamically populated with jQuery.

NOTE: It looks like altering the actual Ajax functions is not going to be an option.

It was suggested to try .live() which has worked well but there are issues with div.tags-hidden being bound over and over again.

Then it was suggested that I use a variable "bound" and check to see if div.tags-hidden has been bound first and if not set the variable to true which in effect disables .expander for any other div.tags-hidden.

So, there are actually two issues which I would be grateful for any advice on:

1) The .expander function is not invoking until a click occurs

2) The div.tags-hidden that the user clicks first is the only one to have the .expander feature.

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

SLIDE 1: On load the .expander function is not kicking in

SLIDE 2: The .expander only happens when a click happens

SLIDE 3: The current function to invoke .expander (see below for code). This includes the variable bound=false. This was a recommended when using .live() but this is causing problems

SLIDE 4: Back to the UI, these two modules contain plenty of tags to invoke the .expander function but only the first div.tags-hidden clicked is getting this treatment. This is due to the "bound" variable being set to false which forces the expander treatment to just one div.tags-hidden, the first one clicked.

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

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">'
  });
     开发者_如何学JAVA   bound = true;
    }
});
</script>

Here are the Slides:

How do I get jQuery .expander to invoke on load and not just on click?

How do I get jQuery .expander to invoke on load and not just on click?

How do I get jQuery .expander to invoke on load and not just on click?

How do I get jQuery .expander to invoke on load and not just on click?

Very thankful for any help with this. Mitch


Make sure that everything is ready for you before trying to act upon 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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜