Jquery - 使用toggleClass时单击处理程序[重复]答案

【问题标题】：Jquery - click handler when using toggleClass [duplicate]Jquery - 使用toggleClass时单击处理程序[重复]
【发布时间】：2016-06-23 17:21:15
【问题描述】：

这个问题最好用例子来描述：

JS：

$(function () {
   $('.classA').on('click', function () { functionA() );
   $('.classB').on('click', function () { functionB() });
} 

var functionA = function()
{
    alert('I am function A');
    $('.classA, .classB').toggleClass('classA classB');
}

var functionB = function ()
{
    alert('I am function B');
    $('.classA, .classB').toggleClass('classA classB');
}

问题很简单，但我很难解决：正如预期的那样，按A类div后，函数A被调用，A类切换到B类，但是下次我按下同一个div时，函数A仍然存在调用，而我希望函数 B 被调用。我做错了什么？？？

【问题讨论】：

只是作为一个提示 - 这就足够了：.on('click',functionA);。其他功能也一样。
您在元素接收到新类之前附加了事件处理程序。你需要寻找delegation。
您的函数缺少关键字function。例如。 function functionA () {...
好吧，忽略这个错误，我已经编辑了关于关键字函数的正确语法的问题。在我的真实代码中，一切都是正确的。
你有没有注意到 var functionB function () 之间缺少等号？

标签： javascript jquery

【解决方案1】：

您可以 delegate the event 从文档到具有适当类的元素，然后将 jQuery's toggleClass function 应用于该事件。

   $(document).on('click','.classA', function () { 
       alert('I am function A');
       $('.classA, .classB').toggleClass('classA classB');
    });

   $(document).on('click','.classB', function () { 
      alert('I am function B');
     $('.classA, .classB').toggleClass('classA classB'); 
    });

【讨论】：

这完全解决了我的问题，但是！它部分离题，但是如果我写 $(document).on('click','.classA', functionA() );然后在文档加载事件上触发 functionA。如果我将其更改为 ....'.classA', function() {functionA()});，这个问题就会消失
这只是为了说明您需要做什么。您绝对可以根据需要进行更改。