Question

我主要只是在找人指出我应该研究的正确方向，我对jQuery和JavaScript都很陌生。

如何在某些条件下只运行一次jQuery事件监听器？当我使用if else语句时，只要遇到if参数一次，事件监听器就会无限期地保留。例如：

 function stateAction(editVal) {
    if (editVal == 'first') {
        $('#btn-1').click(function () {
           alert('First');
           })
    } else if (editVal == 'second') {
        $('#btn-2').click(function () {
           alert('Second');
           })
    }
};

$('#ul-dropdown').on('click', '.markup', function () {
    var editingState = $(this).attr('id');
    stateAction(editingState);
});

使用此功能，如果'first'传递到stateAction，则点击#btn-1将会继续提醒'First'。有人能指出我正确的方向吗？

Answer 1

你可以让这些事件在执行后解除绑定。

添加$（＆＃34;＃btn-1＆＃34;）。off（＆＃34;点击＆＃34;）和$（＆＃34;＃btn-2＆＃34;）。off（＆＃ 34;分别点击＆＃34;）到点击功能。

Answer 2

我不太确定你要做什么你可以随时查看.one() method
希望这会帮助你。 SYA：）

Answer 3

检查点击处理程序中的变量。

$("#btn-1").click(function() {
    if (editVal == "first") {
        alert("First");
    }
});
$("#btn-2").click(function() {
    if (editVal == "second") {
        alert("Second");
    }
});

Answer 4

最多可以使用.one()的所有评论和答案。但我有点想知道为什么要尝试制作这样的代码..而你可以像

一样使用它

$(document).ready(function(){
   var editVal = '';  //make it global
   // btn 1 click event
   $('#btn-1').click(function () {
      if(editVal == 'first'){alert('First')};
   });
   // btn 2 click event
   $('#btn-2').click(function () {
      if(editVal == 'second'){alert('Second')};
   });
   $('#ul-dropdown').on('click', '.markup', function () {
      editVal = $(this).attr('id').toLowerCase().trim();
   });
});

$(document).ready(function(){
   var editVal = '';  //make it global
   // btn 1 click event
   $('#btn-1').click(function () {
      if(editVal == 'first'){alert('First')};
   });
   // btn 2 click event
   $('#btn-2').click(function () {
      if(editVal == 'second'){alert('Second')};
   });
   $('.markup').on('click', function () {
      editVal = $(this).attr('id').toLowerCase().trim();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-1">Btn 1</button>
<button id="btn-2">Btn 2</button>

<a class="markup" id="first">Click Btn 1</a>
<a class="markup" id="second">Click Btn 2</a>

功能仅在某些条件下运行

4 个答案: