Ajax只是第一次工作 - Ajax is working only the first time

情况如下：

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

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

我尝试做的事情：

在Stack Overflow和其他论坛上看到了所有其他答案，但没有人解决这个问题。无论如何，代码点火器部分是正确的，问题在于我的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

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

试着使用类，看看效果如何。

您需要动态生成/添加DOM的事件委派。使用.on()方法：

  $(document).on('click','.btn-success',function(){
      //click event for button code here
  });

因为您正在替换现有按钮。您需要使用委托为新创建的按钮添加事件，

尝试

$(document).on("click",".btn-success",function(){
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); 
        }, 
});
 });

我相信这是因为你删除了成功函数按钮上的ID？

您应该用error: function(xhr, ...)替换error: function(XMLHttpRequest, ...)并替换：

$('#button_like').replaceWith(...);

发件人：

$('#button_like').html('<span class="glyphicon glyphicon-thumbs-up"></span>').addClass('liked');

好吧，伙计们，我已经用这种方式解决了：

通过foreach循环，我将相应的post ID分配给按钮ID。

然后在Ajax函数中，我检测当前ID并只修改这个元素。您可以看到这个工作示例：

$('.button_like').on('click', function(e) {
e.preventDefault();
//Grab the current button's ID property
var clicked = $(this).attr('id');
 //Alert the ID
 alert(clicked);
var data = {
  user_id: '5',
  post_id: '6',
  ajax: '1'  
};

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

});

替换element意味着你从DOM中丢失了相同的click event，因此你需要一次又一次地绑定click event

最好是更改元素的classes和span text

更改类似success callback的

success: function() {
    $('#button_like').addClass('btn-success')// add new class
                     .removeClass('btn-primary') //remove primary class
                     .find('span').text(''); // empty span's text
},

更新如果您想使用class而不是id，请尝试此操作，

var $this=$(this); // make a copy of current button object
$.ajax({
   url: "/",
   type: 'POST',
   data: data,
   success: function() {
      $this.addClass('btn-success')// add new class to current clicked button
           .removeClass('btn-primary')// remove old class
           .html('<span class="glyphicon glyphicon-thumbs-up"></span>');//removing text
   },
   error: function(xhr, textStatus, errorThrown) { 
         alert("Status: " + textStatus); alert("Error: " + errorThrown); 
   }
});

实时演示

如果您希望用户只能单击一次，则使用one((

一个演示