使 trigger() 只运行一次函数答案

【问题标题】：Make trigger() run a function once only使 trigger() 只运行一次函数
【发布时间】：2015-05-25 16:08:18
【问题描述】：

我有 3 个按钮，我使用它们的 cals 创建了一个点击函数。

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

【问题讨论】：

如果能看到全貌就好了，例如您的完整结构，但我的第一个想法是您可能遇到事件冒泡问题。尝试在$('.abc.').click(function(e, elem) { // here 中添加e.preventDefault() 和e.stopPropagation()。

标签： javascript jquery

【解决方案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>

【讨论】：