使用jQuery的on('click')事件和changeclass，只能触发一次。

Question

在下面的脚本中，第一次单击“toggleExtras” span 可以工作。但是随后的单击不起作用。我试图使用 on('click') 方法以及 toggleClass 来定义切换状态和未切换状态的事件。

    jQuery(document).ready(function()
    {
        jQuery('.toggleExtras').on('click', function(e)
        {
            //jQuery('.extras').slideToggle(); //This works but bounces twice.
            jQuery('.extras').show();
            jQuery('.toggleExtras').text('Hide Advanced Options');
            jQuery('.toggleExtras').toggleClass('toggleExtras toggleExtrasHide');
        });

        jQuery('.toggleExtrasHide').on('click', function(e)
        {
            jQuery('.extras').hide();
            jQuery('.toggleExtrasHide').text('Show Advanced Options');
            jQuery('.toggleExtrasHide').toggleClass('toggleExtrasHide toggleExtras');
        });
    });

HTML:

    <span class="toggleExtras">Show Advanced Options</span>

- RegEdit

---

你能在 jsFiddle 上发布一个带有错误的例子吗？ - Brian Hoover

我没有看到控制台错误。点击修改了的类元素不起作用。类已经改变，但 on('click') 对该元素没有触发。 - RegEdit

Answer 1

这是因为在初始化时，.toggleExtrasHide 不存在...

我会重新编写你的代码，像这样:

jQuery('.toggleExtras').on('click', function(e){
  jQuery('.extras').toggle();
  jQuery(this).text(function(el, currentValue){
    return currentValue == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options";
  });
});

Demo: http://jsfiddle.net/xbLc2/ 阅读更多关于.toggle()方法的内容：http://api.jquery.com/toggle/
阅读更多关于.text()方法的内容： http://api.jquery.com/text/

- ahren