Question

我有一个带按钮的面板小部件。单击该按钮应执行与所有此类窗口小部件相关的一些全局操作，然后执行与此窗口小部件实例相关的一些本地操作。全局操作由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绑定安排到同一个元素？

Answer 1

你遇到的问题来自于使用jQuery的.ready（）函数来初始化App，而你的本地代码似乎没有这样的包装器。请尝试以下方法：

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

Answer 2

相反如何：

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

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

Answer 3

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

http://jsbin.com/telofesevo/edit?js,console,output

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

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

3 个答案: