CODEWITHSUNDEEP
javascriptjquery
Becky
Becky

Reputation: 5585

Make trigger() run a function once only

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

$('.abc').click(function(e, elem){
     alert("triggered");
});

I've got another click function which triggers the above click function ( $('.abc'). click function ) by passing a value (val) from each case.

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

My question is, when I click directly on a button the alert shows one only. But when I click on a button in my other function ( $(".custom-menu li").click(function(){) the alert shows 3 times. How do I make the alert show once only when a click is done via $(".custom-menu li").click(function(){ ?

$('.abc').click(function(e, elem){ // alert is shown once only 

$(".custom-menu li").click(function(){ // alert is shown 3 times

Upvotes: 2

Views: 198

Answers (1)

dfsq
dfsq

Reputation: 193261

You are triggering click on every element in the collection, so you see alert 3 times, once per element.

You should trigger click on individual element only:

$(".custom-menu li").click(function(){
     // This is the triggered action name
     switch($(this).attr("data-action")) {
     // A case for each action.
         case "case1": $('.abc:eq(0)').trigger('click'); break;
         case "case2": $('.abc:eq(1)').trigger('click'); break;
         case "case3": $('.abc:eq(2)').trigger('click'); break;
     }
});

And here is a demonstration of it.

$('.abc').click(function(e, elem) {
     alert("Triggered " + $(this).text());
});

$(".custom-menu li").click(function() {
     switch($(this).attr("data-action")) {
         case "case1": $('.abc:eq(0)').trigger('click'); break;
         case "case2": $('.abc:eq(1)').trigger('click'); break;
         case "case3": $('.abc:eq(2)').trigger('click'); break;
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-menu">
    <li data-action="case1">Item 1</li>
    <li data-action="case2">Item 2</li>
    <li data-action="case3">Item 3</li>
</div>

<div class="abc">Element 1</div>
<div class="abc">Element 2</div>
<div class="abc">Element 3</div>

Upvotes: 7

Related Questions