1

我有以下脚本，旨在使用 ajax 更改收藏夹按钮的外观，以及将数据提交/删除到 MySQL 表：

$(document).ready(function() {
jQuery("input.before").click(function(){
   var $this = $(this);
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id': $this.closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        $this.removeClass('before');
        $this.addClass('after');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add favourite.</div>');
      }
    });
});

jQuery("input.after").click(function(){
   var $this = $(this);
   jQuery.ajax({       
      url: 'removefav.php',
      type: 'POST',
      data: {'id': $this.closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        $this.removeClass('after');
        $this.addClass('before');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to remove favourite.</div>');
      }
    });
});
});

通过单击几个按钮之一触发，即：

<div id="32"><input type="button" class="button before"/></div>
<div id="33"><input type="button" class="button before"/></div>

脚本的第一部分按预期删除了“之前”类并添加了“之后”类，但是当我尝试单击带有“之后”类的按钮时，脚本的第二部分不起作用，即按钮的类没有改回“之前”。有人可以让我知道为什么这不起作用吗？

4

1 回答 1

3

您的第一个单击处理程序绑定到当时具有before该类的按钮，即由jQuery("input.before")第二个处理程序返回并且相同的项目，以便随时使用事件委托处理具有特定类的按钮的事件.on()

$(document).ready(function() {
jQuery(document).on("click", "input.before", function(){
   var $this = $(this);
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id': $this.closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        $this.removeClass('before');
        $this.addClass('after');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add favourite.</div>');
      }
    });
});

jQuery(document).on("click", "input.after", function(){
   var $this = $(this);
   jQuery.ajax({       
      url: 'removefav.php',
      type: 'POST',
      data: {'id': $this.closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        $this.removeClass('after');
        $this.addClass('before');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to remove favourite.</div>');
      }
    });
});
});
于 2012-08-05T23:42:41.850 回答