Question

示例：

$(X).bind('click', function() { alert( 'Two' ); });
$(X).bind('click', function() { alert( 'Three' ); });
$(X).bind('click', function() { alert( 'Four' ); });
$(X).bind('click', function() { alert( 'Five' ); });

**$(X).bindUp('click', function() { alert( 'One' ); });**

当用户单击X时，输出应为：

alert( 'One' );
alert( 'Two' );
alert( 'Three' );
alert( 'Four' );
alert( 'Five' );

有可能??

感谢......................

Answer 1

对于简单的情况，我认为你可以这样做：

示例： http://jsfiddle.net/uEEzt/2/

$.fn.bindUp = function(type, fn) {

    this.each(function() {
        $(this).bind(type, fn);

        var evt = $.data(this, 'events')[type];
        evt.splice(0, 0, evt.pop());
    });
};

当您使用此.bindUp()插件时，它只会执行正常的.bind()，但会从最后删除该事件，并将其置于开头。

同样，这仅适用于简单的情况。

编辑：对多个事件进行此操作应该很简单，但不要尝试将其与hover一起使用。

编辑：这是一个适用于多个（空格分隔）事件的版本（同样，不要与hover一起使用）：

示例： http://jsfiddle.net/uEEzt/4/

$.fn.bindUp = function(type, fn) {

    type = type.split(/\s+/);

    this.each(function() {
        var len = type.length;
        while( len-- ) {
            $(this).bind(type[len], fn);

            var evt = $.data(this, 'events')[type[len]];
            evt.splice(0, 0, evt.pop());
        }
    });
};

编辑：修复了“{”}变量未重置的“多个”版本中的错误。

Answer 2

很棒的答案！但是，因为它与较旧的jQuery版本相关，并且不支持.on( events [, selector ] [, function ] )语法，所以我做了一些更改。现在它适用于jQuery 3.3，并且可以定义一个调用它的选择器。这是一个例子：

$(document).ready(function() {
$.fn.bindUp = function() {

    if (arguments.length >= 2) {
        var eventType = '';
        var type = eventType.split(/\s+/);
        var overrideFunction = null;
        var bindTo = $(this);
        var bindToSelector = '';
        var documentBinding = false;
        if (typeof arguments[0] !== 'undefined' && arguments[0] !== '') {
            eventType = arguments[0];
            eventType = eventType.split(/\s+/);
        } else {
            console.log("Wrong type");
            return false;
        }
        if (typeof arguments[2] !== 'undefined' && typeof arguments[1] !== 'undefined' && $.isFunction(arguments[2])) {
            overrideFunction = arguments[2];
        }
        if (!$.isFunction(arguments[1]) && typeof arguments[1] != 'undefinded' && typeof arguments[2] !== 'undefined' && $.isFunction(arguments[2])) {
            bindTo = $(arguments[1]);
            bindToSelector = arguments[1];
            if ($(this).is($(document))) {
                documentBinding = true;
            }
        }
        if (bindTo.length > 0) {
            $.each(bindTo, function() {
                var len = eventType.length;
                while (len--) {
                    $(this).on(eventType[len], overrideFunction);

                    evt = $._data(this, 'events')[eventType[len]];
                    evt.splice(0, 0, evt.pop());
                }
            });
        } else {
            var len = eventType.length;
            var evt = {};
            while (len--) {
                console.log(bindToSelector);
                $(document).on(eventType[len], bindToSelector, overrideFunction);
            }
        }

    } else {
        console.log("Missing arguments");
        return false;
    }
};

$('#reorderButton').on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert("bound first, but executing second");
});

$(document).bindUp('click', '#reorderButton', function(e) {
    alert("bound second, but executing first");
});

}）;

在jQuery中绑定“up”元素？这是可能的？

2 个答案: