使trigger（）仅运行一次函数

Question

我有3个按钮，我用他们的calss来创建一个点击功能。

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

我有另一个点击功能，通过传递每个案例的值（val）来触发上述点击功能（ $('.abc'). click function ）。

$(".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;
     }
});

我的问题是，当我直接点击按钮时，警报只显示一个。 但是当我点击其他功能中的按钮（ $(".custom-menu li").click(function(){ ）警报显示3次。如果点击完成，如何使警报显示一次通过$(".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

Answer 1

您正在触发单击集合中的每个元素，因此您会看到警报3次，每个元素一次。

您应该仅触发单击单个元素：

$(".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;
     }
});

这是一个演示。

 $('.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>