Lier "up" élément dans jQuery? c'est possible?

Question

Exemple:

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

Lorsque l'utilisateur clique X la sortie doit être:

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

Il est possible ??

Merci ......................

Answer 1

Pour les cas simples, je pense que vous pourriez faire quelque chose comme ceci:

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

Lorsque vous utilisez ce plugin .bindUp(), il juste un .bind() normal, mais enlève alors l'événement de la fin, et le place au début.

Encore une fois, ce serait pour les cas simples seulement.

---

EDIT: Il doit être simple de faire ce travail avec de multiples événements, mais ne pas essayer de l'utiliser avec hover.

---

EDIT: est ici une version qui fonctionne avec de multiples événements (espace séparé) (encore une fois, ne pas utiliser avec hover):

Exemple: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: Correction d'une erreur dans la version "multiple" où la variable len n'a pas été réinitialisée.

Answer 2

Bonne réponse! Cependant, comme il est lié aux anciennes versions de jQuery et ne supporte pas la syntaxe .on(events [, selector ] [, function ]), j'ai apporté quelques modifications. Maintenant cela fonctionne jusqu'à jQuery 3.3 et il est possible de définir un sélecteur l'appelant. Voici un exemple:

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

});