0

<script>我在 HTML 文件顶部的标签中有此代码。

    $(document).ready(function()
{
    $('#scrollbar1').tinyscrollbar();
    $('a.jqtree_common').click(updateScrollbar());
});

$(function updateScrollbar()
{
    var oScrollbar = $('#scrollbar1');
    oScrollbar.tinyscrollbar();
    oScrollbar.tinyscrollbar_update();

    $('a.jqtree_common').click(updateScrollbar());
});

但是由于某种原因，当我运行它时，它说updateScrollbar()是 undefined within (document).ready。当我尝试在thenupdateScrollBar()内部定义时，会陷入某种无限循环。(document).readyupdateScrollBar()

我的问题是双重的：

  1. 我可以做些什么来updateScrollBar()定义范围内(document).ready？
  2. 有没有更好的方法将此功能分配给'a.jqtree_common'元素？它们在运行时动态创建，并在使用网页时进行修改。我希望每次单击其中一个时都运行该功能。

我正在使用微小的滚动条和jqtree

编辑：我希望$('a.jqtree_common').click(updateScrollbar);每次更新滚动条时都进行分配，因为我相信单击一个'a.jqtree_common'元素会创建更多'a.jqtree_common'元素。

4

5 回答 5

1

将函数引用作为回调传递，而不是 Click 事件中函数的结果。()将调用该函数并将结果设置为回调，该回调又在其中再次调用updatescrollbar并进入无限循环。

 $(document).ready(function()
{
    $('#scrollbar1').tinyscrollbar();
    $('a.jqtree_common').click(updateScrollbar);
});

function updateScrollbar()
{
    var oScrollbar = $('#scrollbar1');
    oScrollbar.tinyscrollbar();
    oScrollbar.tinyscrollbar_update();

    //$('a.jqtree_common').click(updateScrollbar);
}
于 2013-05-28T22:35:34.220 回答
1

好的，我知道此时擂台上有很多帽子，但我的条目还是一样的......

//IMMEDIATELY-INVOKED FUNCTION EXPRESSION (IIFE)
// Used for privacy/variable scoping
(function(){

  //bind init function to dom-ready event
  $(init); //same as $(document).ready(init);

  //initialize event bindings for page
  function init() {
    //initialize scrollbar
    $('#scrollbar1').tinyscrollbar();

    //click binding for tree
    $('a.jqtree_common').click(updateScrollbar);

    //assuming you want to run the updateScrollbar on page load 
    //in addition to clicks
    updateScrollbar();
  }

  //handles scrollbar updates
  function updateScrollbar() {
    //assuming the tinyscrollbar() initialization only needs 
    //to happen once, inside the initialization event.
    $('#scrollbar1').tinyscrollbar_update();
  }

}());

上面的结构几乎就是我处理事情的方式......我首先做我的变量，然后是顶部的事件绑定，下面是我的函数声明。这是因为函数提升（在 JS 的编译中，函数声明被移动到顶部），这不适用于函数分配（例如：） var x = function(){...}，然后我将整个东西包装在一个IIFE中。我发现这种结构更易于阅读和理解。我不喜欢把我的绑定放在底部，因为我发现你必须经历很多事情才能找到你要找的东西。

于 2013-05-28T22:47:33.123 回答
0

试试这个代码：

 $(document).ready(function() {

    var updateScrollbar = function () {
        var oScrollbar = $('#scrollbar1');
        oScrollbar.tinyscrollbar();
        oScrollbar.tinyscrollbar_update();
    };

    $('#scrollbar1').tinyscrollbar();
    $('a.jqtree_common').click(updateScrollbar).click();
});
于 2013-05-28T22:35:03.040 回答
0

要绑定稍后加载的元素，我们必须使用此.on(函数

$(document).ready(function(){
 $('#scrollbar1').tinyscrollbar();
 $(document).on("click","a.jqtree_common", updateScrollbar);
});


function updateScrollbar(){
 var oScrollbar = $('#scrollbar1');
 oScrollbar.tinyscrollbar();
 oScrollbar.tinyscrollbar_update();
}

如果你想要范围限制，那么在块内声明函数

$(document).ready(function(){
 $('#scrollbar1').tinyscrollbar();
 $(document).on("click","a.jqtree_common", updateScrollbar);

 function updateScrollbar(){
  var oScrollbar = $('#scrollbar1');
  oScrollbar.tinyscrollbar();
  oScrollbar.tinyscrollbar_update();
 }

});
于 2013-05-28T22:38:03.590 回答
0

这最终对我有用：

$(document).ready(function()
{
    $('#scrollbar1').tinyscrollbar();
    $('a.jqtree_common').click(updateScrollbar);

    function updateScrollbar()
    {
        var oScrollbar = $('#scrollbar1');
        oScrollbar.tinyscrollbar();
        oScrollbar.tinyscrollbar_update();

        $('a.jqtree_common').click(updateScrollbar);
    }
});
于 2013-05-29T00:09:25.020 回答