jQuery全局/本地事件执行顺序

jQuery global/local event execution order

本文关键字：事件 执行 顺序 全局 jQuery      更新时间：2023-09-26

我有一个带有按钮的面板小部件。单击该按钮应执行与所有此类小部件相关的一些全局操作，然后仅执行与该小部件实例相关的一些本地操作。全局操作通过CSS类绑定在一个单独的javascript文件中，如下所示：

var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
        });
        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();
jQuery(document).ready(function() 
{
    App.init();
});

在html文件中，本地脚本如下：

$("#widgetBtn1234").click(function (e)
{
    // do smth local
});

目前，本地脚本是先执行的，然后才执行全局脚本，而我希望它是相反的。我试着用document.ready包装本地的，并在全局之后运行，但这似乎并没有改变执行顺序。有什么合适的方法可以将全局和本地jQuery绑定安排到同一个元素吗？

您遇到的问题来自于使用jQuery的.ready（）函数初始化应用程序，而您的本地代码中似乎没有这样的包装器。请尝试以下操作：

var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
        });
        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();
$(function() 
{
    App.init();
});

然后在您的本地JS:

$(function() {
    $("#widgetBtn1234").click(function (e)
    {
        // do smth local
    });
});

注意，$(function(){})可以用作$(document).ready(function(){});的简写。此外，确保您的JS文件位于本地JS之前，因为javascript是按顺序运行的。

或者，您可以使用setTimeout()来确保所有内容都正确加载：

(function executeOnReady() {
    setTimeout(function() {
        // Set App.isInitialized = true in your App.init() function
        if (App.isInitialized) runLocalJs();
        // App.init() hasn't been called yet, so re-run this function
        else executeOnReady();
    }, 500);
})();
function runLocalJs() {
    $("#widgetBtn1234").click(function (e)
    {
        // do smth local
    });
};

这个怎么样：

var widget = $("#widgetBtn1234").get(0);//get the vanilla dom element
var globalHandler = widget.onclick; //save old click handler
// clobber the old handler with a new handler, that calls the old handler when it's done
widget.onclick = function(e){
  //do smth global by calling stored handler
  globalHandler(e);
  //afterward do smth local   
};

可能有一种更具jqueryish风格的方式来写这篇文章，但我希望这个概念对你有用。

-------VVVV----为子孙后代保留古老的答案----VVVV-------

为什么不做这样的事？

    var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
            if(this.id === 'widgetBtn1234'){
               //do specific things for this one
            }
        });
        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();

请原谅我可能犯的任何语法错误，因为我还没有真正测试过这段代码。

查看我在jsbin上创建的简单JQ扩展。

http://jsbin.com/telofesevo/edit?js，控制台，输出

它允许在全局调用之后依次调用所有定义的个人点击处理程序，必要时处理遗漏的处理程序，并轻松重置所有个人处理程序。

相关文章：