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的每个标记添加事件侦听器。你应该这样做：

＆＃13;

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

＆＃13;

.clicked {
    color: red;
}

＆＃13;

<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" />

＆＃13;

将事件监听器添加到整个文档，然后使用.click:not(.clicked)选择标签，可以让您评估＆＃34;每次都是css选择器。

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

1 个答案: