Question

我的代码位于HTML文件顶部的<script>标记中。

    $(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()内未定义(document).ready。当我尝试在updateScrollBar()内定义(document).ready时，updateScrollBar()会陷入某种无限循环。

我的问题有两个：

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

我正在使用小scrollbar和jqtree

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

Answer 1

传递函数引用作为回调，而不是Click事件中函数的结果。 ()将调用该函数并将结果设置为一个回调，其中inturn再次调用其中的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);
}

Answer 2

好的，我知道此时戒指中有很多帽子，但这里的条目是相同的......

//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(){...}），然后我将整个事物包装在{{ 3}}。我发现这种结构提供了更容易的可读性和理解力。我不喜欢把我的装订放在底部，因为我发现你必须经过很多工作才能找到你想要的东西。

Answer 3

试试这段代码：

 $(document).ready(function() {

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

    $('#scrollbar1').tinyscrollbar();
    $('a.jqtree_common').click(updateScrollbar).click();
});

Answer 4

要绑定稍后加载的元素，我们必须使用此.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();
 }

});

Answer 5

这最终对我有用：

$(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);
    }
});

jQuery中的函数范围

5 个答案: