Question

我正在尝试通过添加新类并使用jQuery找到它来注册链接上的第二次单击。但是在第一次点击后它不会改变课程。

希望它有意义，并提前感谢你。

    // Listen for when a.first-choice are being clicked
    $('.first-choice').click(function() {

        // Remove the class and another one
        $(this).removeClass('first-choice').addClass('one-choice-made');

            console.log('First Click');
            // Some code goes here....

        });

        // Make sure the link isn't fireing.
        return false;
    });


    // Listen for when a.one-choice-made are being clicked
    $('.one-choice-made').click(function() {

        // Remove the class and another one
        $(this).removeClass('one-choice-made').addClass('two-choice-made');

            console.log('Second Click');
            // Some code goes here....

        });

        // Make sure the link isn't fireing.
        return false;
    });

Answer 1

加载时，.one-choice-made不存在，因此当您调用$('.one-choice-made')时，它会返回一个空的jQuery对象，因此click()处理程序不会添加到任何内容中。

您要做的是将处理程序附加到始终存在的内容，这将响应click事件（即父/祖先元素）。这是$.on()在委托处理程序语法（即使用过滤器选择器）中调用时将为您执行的操作：

$(document).on('click', '.one-choice-made', function() {
    // my second function
}

在这种情况下，jQuery将一个特殊的处理程序附加到document，它会监视从子元素传播到它的单击事件。当它收到点击时，jQuery会查看点击的目标，并根据您提供的选择器对其进行过滤。如果匹配，则调用您的功能代码。这样，您可以随时使用此类添加新元素，只要它们是您应用.on()的选择器中元素的子元素即可。在这种情况下，我们使用document，因此它将始终使用新元素。

您可以将其减少为已知的永久父元素以减少点击事件，但对于简单情况document则可以。

注意：以同样的方式，删除类first-choice对于是否调用第一个单击处理程序没有任何影响，因为处理程序已应用于该元素。如果删除该类，该元素仍将具有处理程序。您还需要使用委托处理程序：

$(document).on('click', '.first-choice', function() {
    // my first function
}

演示：http://jsfiddle.net/jtbowden/FxqX9/

Answer 2

由于您要更改课程，因此需要使用delegated events的.on()语法。

变化：

$('.one-choice-made').click(function() {

为：

$(document).on('click', '.one-choice-made', function() {

理想情况下，您希望使用DOM中已经比document更近的元素，但document是一个不错的后备。

jQuery不会听我的第二次点击

2 个答案: