Question

我有使用这两个jquery函数的问题，所以这是我的小提琴：http://jsfiddle.net/Wv6gN/5/

和我的js代码：

$("a#slidingMenuButton.noState").click(function() {

$("i.fa-bars").addClass("textToLeft");
 $("a#slidingMenuButton").addClass("BtextToLeft").removeClass("noState");
    alert("lol1");

});


$("a#slidingMenuButton.BtextToLeft").click(function() {

   $("i.fa-bars").removeClass("textToLeft").addClass("textToRight");       $("a#slidingMenuButton").removeClass("BtextToLeft").addClass("noState");
  alert("lol2");

});

它始终是第一个onclick事件。为什么addClass / removeClass不起作用？

Answer 1

您需要使用.on，以便绑定到动态创建的元素。 Demo

$(document).on('click', 'a#slidingMenuButton.BtextToLeft', function () {
    $("i.fa-bars").removeClass("textToLeft").addClass("textToRight");
    $("a#slidingMenuButton").removeClass("BtextToLeft").addClass("noState");
    alert("lol2");
});

Answer 2

我会把这些放在一个函数中

$("a#slidingMenuButton").click(function() {
    if($(this).hasClass('noState') {
      $("i.fa-bars").addClass("textToLeft");
      $("a#slidingMenuButton").addClass("BtextToLeft").removeClass("noState");
      alert("lol1");
 }
else {
    if($(this).hasClass('BtextToLeft') {
      $("i.fa-bars").removeClass("textToLeft").addClass("textToRight");           
      $("a#slidingMenuButton").removeClass("BtextToLeft").addClass("noState");
      alert("lol2");
     }
  }
});

Answer 3

改为使用toggleClass。

$("a#slidingMenuButton.noState").click(function() {
  $("i.fa-bars").addClass("textToLeft");
  $("a#slidingMenuButton").toggleClass("BtextToLeft").toggleClass("noState");
  alert("lol1");
});

toggleClass将删除该类，如果它在那里，并在不存在时添加它。这是您更新的fiddle。

Answer 4

您需要在使用中将元素与'delegate'或'on'绑定。原因在于委托或现在将绑定您的元素现在和未来，因为它们存在和/或被创建。这对于经常更新或更改类等的元素非常有用......

http://api.jquery.com/on/

http://api.jquery.com/delegate/

当您设置初始处理程序时，这些元素（尝试访问它们的方式）不存在。

因此，您需要将代码更改为：http://jsfiddle.net/Wv6gN/12/

在此处更新您的代码：正如其他人所说。使用“.on”方法。

 $(document).on('click', 'a#slidingMenuButton.BtextToLeft', function () {

addClass / removeClass不起作用

4 个答案: