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是对象（来自前面的代码行）

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

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

我做了一些测试警报，包括hasClass（'add_buddy'）返回false，然后hasClass（'rem_buddy'）返回true。

以下是其中一个完整的参考资料

$('.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/

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

1 个答案: