What am I missing about jQuery's trigger and event.data?

Question

I am not able to cause jQuery.trigger to send data accessible via event.data in my click handler.

I wonder if I fundamentally understand how these sets of functions are meant to operate?

Here is my JS:

$(document).ready(function() {

    $("#bb").click(function(event){
      console.log(event.data);
    });

$("#bb").trigger("click", {key: "val"});

});

And here my HTML:

<button id="bb" value="click me">click me</button>

As you can see, it's pretty straightforward. What I expect to see in the console is {key: "val"}, but what I am seeing is null.

Here is a codepen for your utility. https://codepen.io/crowns/pen/ZEYxEEO?editors=1111

I have a point of confusion about the jQuery documentation on trigger. It

Note the difference between the extra parameters passed here and the eventData parameter to the .on() method. Both are mechanisms for passing information to an event handler, but the extraParameters argument to .trigger() allows information to be determined at the time the event is triggered, while the eventData argument to .on() requires the information to be already computed at the time the handler is bound.

How is one ought to access the data passed to trigger via the extraParameters arguement?

And is eventData set via on accessible by Event.data? To answer my own question, yes, based on reading documentation for on().

score 1 · Accepted Answer · answered Jan 08 '20 at 20:00

1

The first parameter passed is always event, the second one is the data you're sending - You can't use .trigger() to change event.data

$(document).ready(function() {
  $("#bb").on('click', function(event, data) {
    console.log(event.data);
    console.log(data);
  });

  $("#bb").trigger('click', {key: 'value'});
});

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

<button id="bb" value="click me">click me</button>

answered Jan 08 '20 at 20:00

Shiny

4,945
3
17
33

Well, this looks proper useful, thank you. Is there a reason specific to this case you used on() instead of click()? I see based on further reading that Event.data is static data set via on(), so thank you for tipping me on to that. – Jade Steffen Jan 08 '20 at 20:12
Binding directly to the `.click()`, `.change()` etc was deprecated(?) and isn't advised anymore, so I tend to just correct it as I write the answer without thinking too much – Shiny Jan 08 '20 at 20:15
This may be a conscious abuse of the comment facility but I persist–I notice you added a script tag and my pen seems to be having trouble with jQuery even though it's a dependency in the settings. Is adding dependencies manually the preferred way to use codePen? – Jade Steffen Jan 08 '20 at 20:19
I believe that's just the standard ways that Online Editors fetch external libaries, I'm assuming for security reasons; [Repl.it](https://repl.it/), [codepen.io](https://codepen.io/), [jsfiddle](https://jsfiddle.net/), etc all do the same thing - Stack Snippets included – Shiny Jan 08 '20 at 20:21
Also, I was wrong about the depreciation in my First comment - Read [this Thread](https://stackoverflow.com/questions/11296530/jquery-onclick-vs-click-and-delegateclick) instead, it explains better (If you're interested) – Shiny Jan 08 '20 at 20:23

What am I missing about jQuery's trigger and event.data?

1 Answers1