更改其类后单击链接已更改不起作用

Question

我在我正在做的事情上有一小段代码，用户点击一个图标就可以将某人添加到他们的好友列表中。一旦他们接受了确认，一些ajax运行，我更改了图像的几个元素，包括它的类。

整个事件的单击事件基于图像的类运行，它可以是.add_buddy或.rem_buddy

所以在ajax运行之后，我这样做：

element.attr('src', '/images/icon_user.gif');

element
    .removeClass('add_buddy')
    .addClass('rem_buddy')
    .attr('id', 'rem_buddy_' + buddy_id);

element.attr('alt', 'this member is on your buddy list');

element.attr('title', 'this member is on your buddy list');

元素BTW是对象(来自前面的代码行)

现在，如果我在所有更改之后单击图像，它仍然会调用旧类的单击事件。换句话说，如果我单击添加好友，上面的代码就会运行，add_buddy类将被删除，rem_buddy类将被添加。

当我在上面的场景之后点击它时，它会触发add_buddy的点击事件，而不是rem_buddy的点击事件

我做了一些警报测试，包括返回false的hasClass('add_buddy')和返回true的hasClass('rem_buddy')。

下面是其中一个完整的块供参考

$('.add_buddy').click(function()     {

  var buddy_id = str_replace('add_buddy_', '', $(this).attr('id'));
  var element = $(this);

  if (confirm('Add this person to your buddy list?'))   {

    $.ajax({  
      async: false,
      type: 'POST',  
      url: '/forum_functions/functions/add_buddy.php', 
      data: 'buddy_id=' + buddy_id,
      success: function(data, textStatus){
        element.attr('src', '/images/icon_user.gif');
        element.removeClass('add_buddy').addClass('rem_buddy').attr('id', 'rem_buddy_' + buddy_id);
        element.attr('alt', 'this member is on your buddy list');
        element.attr('title', 'this member is on your buddy list');
        }

      });

    }

});

我不太确定我在这里遗漏了什么

Answer 1

这种行为的原因是事件被绑定到特定的元素，在事件绑定的时刻，具有指定的选择器。简化示例：

​

$(function() {
  $('.foo')
    .on('click', function() {
      alert($(this).hasClass('foo'));
    })
    .removeClass('foo');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="foo">Bar</button>

​

为了避免这种情况，您应该使用事件委托：

​

$(function() {
  $(document)
    .on('click', '.foo', function() {
      alert($(this).hasClass('foo'));
    })
  $('.foo').first().removeClass('foo');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="foo">Foo1</button>
<button class="foo">Foo2</button>

​

有关事件委派的更多信息：http://learn.jquery.com/events/event-delegation/