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

Question

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

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

建议尝试 .live() ，它运行良好，但绑定 div.tags-hidden 时存在问题反复。

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

所以，实际上有两个问题，我希望得到任何建议：

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

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

下面的幻灯片希望能更好地说明这一点（参见下面的图片）。

幻灯片 1： 加载时，.expander 函数不会启动

幻灯片 2： .expander 仅在单击时发生

幻灯片 3：当前调用 .expander 的函数（代码见下文）。这包括 变量绑定=假。在使用 .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>