CODEWITHSUNDEEP
javascriptjquerytriggers
Zach Wolf
Zach Wolf

Reputation: 629

jQuery .trigger() multiple events

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?

Upvotes: 28

Views: 34502

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

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

Upvotes: 0

hazzik
hazzik

Reputation: 13344

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

Upvotes: 35

Zach Wolf
Zach Wolf

Reputation: 629

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

Upvotes: 6

Derek Hunziker
Derek Hunziker

Reputation: 13141

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

Upvotes: 7

Related Questions