jquery - 如何让 jQuery .expander 在加载时调用，而不仅仅是在单击时调用？

Question

我在使用 jQuery .expander 函数并在页面加载时调用它时遇到问题，我知道这与使用 jQuery 动态填充的数据有关。

注意:看起来改变实际的 Ajax 函数不会是一个选项。

建议尝试 .live() ，效果很好，但 div.tags-hidden 反复绑定(bind)存在问题。

然后建议我使用变量“bound”并检查 div.tags-hidden 是否已先绑定(bind)，如果没有将变量设置为 true，这实际上会禁用任何其他 div.tags 的 .expander-隐。

所以，实际上有两个问题，我将不胜感激您的任何建议:

1) .expander 函数只有在发生点击时才会调用

2)用户首先点击的div.tags-hidden是唯一具有.expander功能的。

下面的幻灯片希望能更好地说明这一点(请参阅下面的图像)。

幻灯片 1:加载时 .expander 函数未启动

幻灯片 2: .expander 仅在发生点击时发生

幻灯片 3: 调用 .expander 的当前函数(请参阅下面的代码)。这包括 变量绑定(bind)=假。在使用 .live() 时建议这样做，但这会导致问题

幻灯片 4:回到 UI，这两个模块包含大量标签来调用 .expander 函数，但只有点击的第一个 div.tags-hidden 才会得到这种处理。这是因为“bound”变量被设置为 false，这强制扩展器处理为仅隐藏一个 div.tags，即第一个单击的。

总结一下: 如何让所有 div.tags-hidden 包含 .expander 函数 onload？

这是我当前使用的 jQuery:

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

这是幻灯片:

非常感谢您对此提供的任何帮助。 米奇

Answer 1

在尝试采取行动之前，请确保一切都已准备就绪。又名 $(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>