JQuery .trigger("click") event not the 'same' as a real 'click'?

JavaScript
#1

Hi,

On my Simon project I am trying to make as much code reuse as I can-- Thus have a single ‘play sound’ function for both when the ‘user’ presses a button as when the computer ‘chooses’ one.

I am trying to use the JQuery .trigger(“click”) event to do this and it… ‘Sort-of’ works…

The code thus far is on start up the program will randomly choose a button to press and then trigger it as just described. The part that does ‘work’ is that it plays the sound associated with that button. The button it selected is also output to the console.

However, if then one goes and manually clicks one of the buttons (even the one chosen) you can see I have an ‘active’ CSS property attached to the image that is supposed to make the button ‘light up’.

So, in a sense it really ‘is’ clicking the button, in a sense because it triggers the sound-- But when the computer selects the button doesn’t ‘light-up’. Thus is a .trigger(“click”) somehow at once a click event, but not one ? :confused:

https://codepen.io/abalducci/pen/VyQEYB

#2

I don’t use jQuery a lot but from a quick read (http://api.jquery.com/trigger/) I think it might be better to define your click handlers using jQuery on() (http://api.jquery.com/on/) instead of putting them in the HTML.

edit to add: https://stackoverflow.com/questions/4624670/using-jquery-to-trigger-html-onclick-event

#3

On a phone and can’t check this fully, but a. trigger will not do exactly the same thing as an actual user-triggered event, b. this is a complicated way of doing things, you are making things much more difficult for yourself. The computer does not need to trigger any click event, because it doesn’t need to press anything - it can change the class, play the sound etc directly. It might seem like you’re saving some coding, but what you’re actually doing is adding an extra layer of complex, fragile code on top of what you need.

#4

Ok thanks guys. One thing I did realize is also I have the opacity change even tied to the parent div-- Though even when I try to use .trigger and point to the parent div I still don’t get the color change.

I will try to rethink another way to go around it/add classes as you suggest.

#5

As @DanCouper suggests, just call the handler function directly when you need to computer to click the button.

#6

i personally would do it like this:
$("#button").click(function(){ doStuff();});
when it should be done on click

doStuff();
when it should be launched by the pc

the function doStuff is defined somewhere at the beginning

#7

jQuery .click() can be used to assign a click handler if in the form of

$("#menu-button").click(function() {
  // execute something here when user clicks on this #menu-button
});

or be used to trigger the click event if used like this:

$("#menu-button").click();   // trigger click event, as if a user clicked the #menu-button
#8

Do you mean to ask if jQuery’s click function is tied to the CSS :active pseudo-class?

The answer is no. For one, it wouldn’t know how long :active is clicked for. Active pseudo-class is really closer to mouseup and mousedown than click. Even then, the trigger function just runs the event handler without looking at any CSS pseudo-classes.

The closest solution is to make a real class instead that does what :active does and then toggle it accordingly.

#9

Well, okay, the gist I get out of all of this is the ‘trigger’ class is ‘not’ quite like a real ‘click’ event and I should just kind of generally rethink all of this.

That is totally ‘ok’. I think it is interesting to have brought this point up because lets say you wanted to ‘simulate’ mouse events as a ‘macro’ on screen in JS with JQuery. Obviously ‘trigger’ is ‘somewhat’, but not yet ‘fully’ sufficient to encompass all these actions, at least if I am correct.

Let me move away from my own project for a moment-- If I just had a simple ‘button’, and ran trigger click, would the button ‘appear’ to the user to be momentarily depressed ?

If not, what is this function really for ?

#10

No, it doesn’t behave like an invisible mouse. If you want to simulate something being depressed, then you probably need to use timeout() and play with the button classes to mimic a button being pressed by adding/removing classes.

One example: In my case, I have a menu navigation that opens a panel/subpanel with more options in the subpanel. If I load a new page, and I want to automatically open the subpanel of the currently active menu (for that page), I just trigger the click event for my “.active” class menu item.

$(document).ready(function () {
            $(".submenu").slideUp(10);  // close all submenus during initial load of page

            $("nav .mainmenu-item").click(function () {  // click handler for menu items
                $(this).next(".submenu").slideToggle(150).siblings(".submenu").slideUp(150);  // toggle submenu for this clicked menu item, close all others
            });

            $("nav .mainmenu-item.active").click(); //  open submenu panel of  'menu.active' during initial load of page
        });

Demo of above code:

#11

One major reason for using it is to implement a pattern called pubsub (pub for publish, sub for subscribe) using jQuery. For example, say I have notifications that appear at the top of the screen when something happens.

You can create events, you don’t need to just use ‘click’ or ‘load’ or whatever, and jQuery makes that easy. So you would have a ‘notify’ event, and the notification would be in an event handler like $('.notification').on('notify', functionToShowNotification). Then every time you had something that you wanted a notification for, you could include $.trigger('notify', like say your user submitted a form successfully.

It means the notifications don’t need to know anything about the rest of the code, or vice versa - the things aren’t tied together, the logic is separate. The notifications subscribe to the ‘notify’ event, and anything that publishes by triggering it causes the notification logic to run.

It also means you could have multiple things listening out for ‘notify’, not just one thing (maybe something pops up at the bottom of the screen as well, or some image changes or something); trigger will cause everything listening for ‘notify’ to fire.

#12

Really cool— and obviously beyond what is basically presented ‘here’ but, too, why I so much trust in this community. It really is something I’d love to ‘add’ to, but as yet there are obviously those whom are above my level in experience. So I ask, and ‘thank you’.

Further just to note I come to all this from a really ‘grounds up’ assembly, CPP, embedded level of experience, and therein there is a totally different set of frustrations, especially, timing, why something might not work… Here it is kind of irrelevant, but more ‘cross browser’. Timing constraints are not as hard to understand, but sometimes getting the damn thing to work does feel a bit like ‘voodoo logic’. In any case, I appreciate all your help.

1 Like