如何使jQuery click（）函数仅运行一次

Question

我有一种情况，我希望单击按钮时会发生事件，但是当第二次单击按钮时又希望有不同的行为。 这是正在发生的事的一个例子：

 $('.click').not('.clicked').click(function () { $(this).addClass('clicked'); $('<p class="test">Test</p>').insertAfter(this); }); 

 .clicked { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='button' class="click" value="Click Me" /> <input type='button' class="click clicked" value="Click Me" /> <input type='button' class="click" value="Click Me" /> 

我想做的是一旦将.clicked类添加到按钮中，就停止运行jQuery。 如果按钮已经应用了该类，则可以按我期望的方式运行，但是如果我使用jQuery添加该类，则每次单击按钮时，它不会停止运行我的函数。

Answer 1

使用哪种类型的CSS选择器都没有关系，因为它只会执行一次。 所以，你要添加的事件侦听器与类中的每个标签.click并没有.clicked 。 您应该执行以下操作：

 $(document).on('click', '.click:not(.clicked)', function () { $(this).addClass('clicked'); $('<p class="test">Test</p>').insertAfter(this); }); 

 .clicked { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='button' class="click" value="Click Me" /> <input type='button' class="click clicked" value="Click Me" /> <input type='button' class="click" value="Click Me" /> 

将事件侦听器添加到整个文档，然后再使用.click:not(.clicked)选择标签，可以使您每次“评估” css选择器。