I've got 3 buttons and I've used their calss to create a click function.

$('.abc').click(function(){
     if (val).is(':visible')){
       //do something
     }
});

I've got another click function as below

$(".custom-rmenu li").click(function(){
     // This is the triggered action name
     switch($(this).attr("data-action")) {
     // A case for each action.
       case "case1": alert("first"); break;
       case "case2": alert("second"); break;
       case "case3": alert("third"); break;
     }
});

My question is, I need to trigger the $('.abc'). click function via the $(".custom-rmenu li"). click function. How do I pass a value (val) from each case to the $('.abc'). click function?

I've got 3 buttons and I've used their calss to create a click function.

$('.abc').click(function(){
     if (val).is(':visible')){
       //do something
     }
});

I've got another click function as below

$(".custom-rmenu li").click(function(){
     // This is the triggered action name
     switch($(this).attr("data-action")) {
     // A case for each action.
       case "case1": alert("first"); break;
       case "case2": alert("second"); break;
       case "case3": alert("third"); break;
     }
});

My question is, I need to trigger the $('.abc'). click function via the $(".custom-rmenu li"). click function. How do I pass a value (val) from each case to the $('.abc'). click function?

• javascript
• jquery

• Here is demo please check it out. jsfiddle/0yu2zx3u – Dhaval Bharadva Commented May 25, 2015 at 5:42
• How is your HTML built up? Is there a .abc button inside each <li>? – Ja͢ck Commented May 25, 2015 at 5:46

3 Answers 3

You can pass parameters in trigger as follow:

$( ".abc").trigger( "click", [ "myParam1", "myParam2" ] );

And you can get the parameters:

$('.abc').click(function(e, myParam1, myParam2) {

Docs: http://api.jquery./trigger/

trigger signature: .trigger( eventType [, extraParameters ] )

In jQuery trigger function first parameter is the event to be triggered, you can pass any other data as second argument in array, like this:

.trigger('click', [val1, val2]);

.on('click', function(event, val1, val2) { ... })

An incredible use of this could be like an "observer" from a class that you can't access because the click is been recognized by a vendor that produce a JS animation.

So, after executing the the animation in vendor you could call an listener inside in your main side effect class, triggering an observer.

First create and a DOM object to be a observer:

<a id='#observer'></a>

In your main class, declare the observer:

this.observer = $('#observer');

In the same class, define your function to handle listeners:

registerHandlers() {
    this.observer.off().click((e, params) => this[params.function](params.event));
}

In last, trigger the click inside the vendor, after animation:

$('vendor-class').on('click', function (event) {
    animationJs() // Vendor stuff...
    $('#observer').trigger( "click", [ {
      event,
      function:"myFunctionToHandleVendor",
    } ] );
}

NOTE:. The great achievement here is pass an object containing multiples variables, for this put the object inside an array.

[{type:'secret', user:'Jonh', msg:'Paul is dead!'}]