javascript - Ajax 仅在第一次运行

Question

情况是这样的:

在我的 codeigniter 应用程序(一种社交网络演示)中，正在开发 LIKE 按钮。

当使用 foreach 循环阅读帖子时，每个帖子后都会显示一个赞按钮。第一次正常工作:Ajax 将数据发送到 codeigniter 方法，数据被插入到表中，按钮变为绿色(成功)。然后它停止工作。即使我刷新页面，也不会再触发调用。

我尝试做的事情:

在 Stack Overflow 和其他论坛上看到了所有其他答案，但没有人解决问题。不管怎样，codeigniter 部分是正确的，问题出在我的 Ajax 调用上。

出于调试目的对其进行了简化，现在我有一个非常非常简单的 Ajax 函数，服务器端禁用，唯一应该做的就是在单击按钮时使按钮变为绿色。同样，它只在第一次工作，然后就不再工作了……

这是 HTML:

<button id="button_like" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>

这是 Ajax 调用:

$('#button_like').click(function(e) {

e.preventDefault();

// alert('click');

var data = {
  user_id: '5',  // for debug
  post_id: '6',  // for debug
  ajax: '1' 

};

$.ajax({

  url: "<?php echo site_url('post/like'); ?>",
  type: 'POST',
  data: data,
  success: function() {
   $('#button_like').replaceWith('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>');
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        }, 

});

//  return false;

});

这个问题:

我怎样才能让一个简单的 Ajax 调用每次都能正常工作？

非常感谢!

编辑:

谢谢大家的回答。我将 button_like 设为类而不是 ID。

 <button type="submit" class="btn btn-primary button_like"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>

然后这样调用函数:

  $('.button_like').on('click', function(e) {

并以这种方式取得成功:

  success: function() {
   $('.button_like').replaceWith('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>');
  },

但是现在，单击一个按钮后，所有按钮都会变为绿色。我怎样才能让我点击的那个变成绿色？谢谢!

编辑 2:

我在这个 Jsbin 中重现了这种情况:

http://jsbin.com/xulaxowa/1/edit

Answer 1

您正在为附加事件的元素使用 ID。这是否意味着您在页面上多次重复使用相同的 ID？如果是这种情况，jQuery 只会将事件添加到它找到的第一个事件中……因为它只希望每页有一个 ID。

尝试改用类，看看效果如何。