Question

只是搞乱了，我知道为什么这不起作用，但我没有看到任何其他方法来做...

简单功能：

$(".click").on("click", function() {
    alert("first click");
    $(this).removeClass("click");
    $(this).addClass("next");
});
$(".next").on("click", function(){
    alert("second click");
});

然而，我总是得到第一次点击＆＃34;警报。所以我知道这是因为在创建页面时next类不在那里......

这会是一个好方法吗？

这是我的测试小提琴：

http://jsfiddle.net/tUp9R/1/

Answer 1

您可以使用事件委派：http://jsfiddle.net/tUp9R/4/

jQuery文档：https://learn.jquery.com/events/event-delegation/

使用Javascript：

$(".test").on("click", ".click", function() {
    alert("first click");
    $(this).removeClass("click");
    $(this).addClass("next");
});

$(".test").on("click", ".next", function() {
    alert("second click");
});

HTML：

<div class="test">
    <button class="click">Click Me</button>
</div>

您还可以使用如下所示的事件数据来简化它：http://jsfiddle.net/tUp9R/7/

$(".click").on("click", {first: true}, function(e) {
    if (e.data.first) {
        alert("first!")
        e.data.first = false
    } else {
        alert("not first :)")
    }
})

Answer 2

您可以在此处使用 event delegation 来应用 .on() 语法：

$(document).on("click", '.click',function(){
    alert("first click");
    $(this).removeClass("click");
    $(this).addClass("next");
});

$(document).on("click", '.next',function(){
    alert("second click");
});

Updated Fiddle

Answer 3

在$（this）之后添加.addClass（'next'）。click（）; 并在开头移动.next点击功能，以便浏览器知道该怎么做该函数被调用。

这是完整的代码。

`$(".next").on("click", function(){
alert("second click");
});
$(".click").on("click", function() {
alert("first click");
$(this).removeClass("click");
$(this).addClass("next").click();
});`

调用一个新创建的类

http://jsfiddle.net/tUp9R/1/

3 个答案: