Привязать элемент "вверх" в JQuery?возможно?

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

РЕДАКТИРОВАТЬ: Исправлена ​​ошибка в «множественной» версии, где len переменная не была сброшена.

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

});