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。

尝试使用类，看看它是怎么回事。

Answer 2

因为您要替换现有按钮。您需要使用委托

为新创建的按钮添加事件

试

$(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); 
        }, 

});
 });

Answer 3

我认为这取决于您从成功功能上的按钮中删除ID？

Answer 4

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

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

Answer 5

替换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); 
   }
});

Live Demo

如果您希望该用户只能点击一次，请使用 one()

One demo

Answer 6

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

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

by：

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

Answer 7

好的，我已经以这种方式解决了：

通过foreach循环，我为按钮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); 
        }, 

  });


});

Ajax只是第一次工作

7 个答案: