Question

我有一些JavaScript来执行逻辑，即单击按钮时doSomething()。我知道按钮的类，但页面上有多个按钮与同一个类。下面我的代码的问题是，当我只希望它只执行一次时，doSomething()函数对页面上的每个按钮执行一次。

var myButtonClass = $(".my-button-class");
if (myButtonClass) {
    myButtonClass.click(function (event) {
        if (someCondition) {
            doSomething();
        }
    });
}

我知道按钮div选择会更好，但按钮div名称都会根据有多少（即#my-button-div1，#my-button-div2等）和按钮数量而有所不同是不确定的。

有没有办法只做一次这个活动？我不关心班级中哪个按钮被点击，我只需要触发一次事件然后就完成了。

更新：要清楚，如果用户再次单击页面上的另一个按钮，我仍然希望执行逻辑，因此我不想完全取消绑定该事件。我只是不希望它对页面上的每个按钮执行一次。例如，假设我有4个按钮。现在只需单击一个按钮就可以执行以下操作：

alert!
alert!
alert!
alert!

我只需要其中一个警报。基本上，每当用户点击页面上的任何按钮时，我只需要每次点击alert!一次。

Answer 1

修改，以便您不会有奇怪的if语句，并允许其他点击处理程序在其他地方绑定时愉快地工作

<强>更新：

＆＃13;

var clickHandler = function handleClick(event) {
  doSomething();
}
var bindClicks = true;

function doSomething() {
  alert('alert!');  
}

function doTheBinding() {
  if (bindClicks) {
      $('.my-button-class').on('click', clickHandler);
      bindClicks = false;
  }
}

// as many times as you want but it will still call once
doTheBinding();
doTheBinding();
doTheBinding();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="my-button-class">Click me!</button>
<button class="my-button-class">Click me!</button>
<button class="my-button-class">Click me!</button>
<button class="my-button-class">Click me!</button>

＆＃13;

Answer 2

您可以使用on()和off()分别绑定和取消绑定元素上的事件。

$('.my-button-class').on('click', function (event) {
    if (someCondition) {
        doSomething();

        // Unbind the event on all the elements having the class
        $('.my-button-class').off('click');

        // To unbind the event on only the clicked element
        // $(this).off('click');
    }
});

旁注： { {1}}将始终评估为if (myButtonClass) {。即使找不到元素并且对象总是真实的，jQuery也会返回一个对象。要检查DOM中是否存在元素，请在jQuery对象true上使用length属性。

Answer 3

如果给处理程序一个受闭包保护的本地布尔变量，则可以创建一个只执行一次的函数。 See this SO answer.

运行下面的代码段以查看其实际效果。

＆＃13;

$(".my-button-class").click(function() {
  var executed = false;
  return function() {
    if (!executed) {
      executed = true;
      doSomething();
    }
  };
}());

function doSomething() { 
  alert("You should only see me once!");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="my-button-class">Click me!</button>
<button class="my-button-class">No click me!</button>

＆＃13;

更新：解决不止一次绑定点击事件的不同问题。只是做一个类似的事情：

＆＃13;

var bind = function() {
    var bound = false;
    return function() {
        if (!bound) {
            bound = true;
            $(".my-button-class").click(function() {
                if (someCondition)
                    doSomething();
            });
        }
    };
}();
bind();
bind(); // won't execute second time

var someCondition = true;
function doSomething() {
  $("#output").append("<br>alert!");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="my-button-class">Click me!</button>
<button class="my-button-class">No click me!</button>
<span id="output"></span>

＆＃13;

仅对CSS类下的一个按钮执行单击事件

3 个答案: