开发者

Bind "up" element in jQuery? it's possible?

开发者 https://www.devze.com 2023-01-19 12:39 出处:网络
Example: $(X).bind(\'click\', function() { alert( \'Two\' ); }); $(X).bind(\'click\', function() { alert( \'Three\' ); });

Example:

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

When the user click X the output should be:

alert( 'One' );
alert( 'Two' );
alert( 'Three' 开发者_StackOverflow);
alert( 'Four' );
alert( 'Five' );

It's possible??

Thanks......................


For simple cases, I think you could do something like this:

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

When you use this .bindUp() plugin, it just does a normal .bind(), but then removes the event from the end, and places it at the beginning.

Again, this would be for simple cases only.


EDIT: It should be simple to make this work with multiple events, but don't try to use it with hover.


EDIT: Here's a version that works with multiple (space separated) events (again, don't use with hover):

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

EDIT: Fixed mistake in "multiple" version where len variable was not reset.


Great answer! Still , because it is related for older jQuery versions and does not support the .on( events [, selector ] [, function ] ) syntax I have made some changes. Now it works for up to jQuery 3.3 and it is possible to define a selector calling it. Here is an example:

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

});

0

精彩评论

暂无评论...
验证码 换一张
取 消