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

时间:2010-10-12 14:27:53

标签: javascript jquery html json

示例:

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

有可能??

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

2 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:1)

很棒的答案!但是,因为它与较旧的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");
});

});