jQuery .trigger() multiple events

Question

I'm writing a jQuery plugin and using .on and .trigger as my pub/sub system. However, I want to trigger multiple events in different scenarios.

Is this possible to do as one string, like the .on method?

Goal:

$this.trigger("success next etc");    // doesn't work

Current solution:

$this
    .trigger("success")
    .trigger("next")
    .trigger("etc");                  // works, triggers all three events

Any suggestions?

Answer 1

JQuery itself does not support triggering multiple events, however you could write custom extension method triggerAll

(function($) {
    $.fn.extend({
        triggerAll: function (events, params) {
            var el = this, i, evts = events.split(' ');
            for (i = 0; i < evts.length; i += 1) {
                el.trigger(evts[i], params);
            }
            return el;
        }
    });
})(jQuery);

And call it like following:

$this.triggerAll("success next etc");

Answer 2

What you have is fine... you can't trigger multiple events using a comma separated list. The trigger() constructor only takes an event name and optional additional parameters to pass along to the event handler.

An alterternative would be to trigger all events attached to an element, however, this may not meet your needs if you need to trigger specific events in different senarios:

$.each($this.data('events'), function(k, v) {
    $this.trigger(k);
});​

Answer 3

Just in case anyone else stumbles upon this question later in life, I solved this by creating a custom jQuery function.

$.fn.triggerMultiple    =   function(list){
    return this.each(function(){
        var $this = $(this); // cache target

        $.each(list.split(" "), function(k, v){ // split string and loop through params
            $this.trigger(v); // trigger each passed param
        });
    });
};

$this.triggerMultiple("success next etc"); // triggers each event

Answer 4

Since, I don't have the privilege of commenting, so I would like to point out that $this.data('events') doesn't work , the inner use function has to be used. $._data($this[0], 'events')

Answer 5

You could extend the original .trigger() Method prototype:

 (function($) { const _trigger = $.fn.trigger; $.fn.trigger = function(evtNames, data) { evtNames = evtNames.trim(); if (/ /.test(evtNames)) { evtNames.split(/ +/).forEach(n => _trigger.call(this, n, data)); return this; } return _trigger.apply(this, arguments); }; }(jQuery)); $("body").on({ foo(e, data) { console.log(e, data); }, bar(e, data) { console.log(e, data); }, baz(e, data) { console.log(e, data); }, }); $("body").off("bar"); // Test: stop listening to "bar" EventName $("body").trigger(" foo bar baz ", [{data: "lorem"}]); // foo, baz

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Code explained

// Keep a reference to the original prototype
const _trigger = $.fn.trigger;

$.fn.trigger = function(evtNames, data) {

  // Remove leading and ending whitespaces 
  evtNames = evtNames.trim();

  // If the string has at least one whitespace
  if (/ /.test(evtNames)) {

    // Split names into Array (Treats multiple spaces as one)
    evtNames.split(/ +/)
    // Call the original .trigger() method for one eventName (and pass data)
      .forEach(n => _trigger.call(this, n, data));

    // End here.
    // Return this (Element) to maintain jQuery methods chainability for this override.
    return this;
  }

  // No whitespaces detected
  // Pass all arguments to the original .trigger() Method immediately.
  // The original method already returns this (Element), so we also need to 
  // return it here to maintain methods chainability when using this override. 
  return _trigger.apply(this, arguments);
};