在php中的ajax上应用jQuery分页答案

【问题标题】：Apply jQuery pagination on ajax in php在php中的ajax上应用jQuery分页
【发布时间】：2017-03-02 15:02:42
【问题描述】：

我正在使用分页，当我在购物车中添加产品时，它仅适用于第一页。当我点击第二页并尝试将产品添加到购物车时，ajax 不起作用。

它也将如何在第二页上工作？提前致谢。

JavaScript 代码：

<script>
var monkeyList = new List('test-list', {
valueNames: ['name'],
page:9,
pagination: true

});
</script>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
 </script>

 <script>
 $(function(){
 $("#form").click(function(event){
 event.preventDefault();
 $.ajax({
 url:'<?php echo base_url().'cart/add/';?>',
 type:'POST',
 async: false,
 data:$(this).serialize(),
 success:function(result){

 $('#response').load('<?php echo base_url().'Products/menu';?>');
 }
 });
 });
});
</script>

【问题讨论】：

您是否在 chrome 开发人员工具中检查了单击第二页时是否正在生成 ajax 请求？并查看您是否在响应选项卡中收到任何服务器错误。
能否请您添加#form标签#response标签的html

标签： php jquery ajax pagination

【解决方案1】：

您必须将点击事件绑定到每个页面中的所有产品。你的代码只会将点击事件绑定到当前页面上的产品。

$(function(){
 $("#form").click(function(event){
 event.preventDefault();
 $.ajax({
 url:'<?php echo base_url().'cart/add/';?>',
 type:'POST',
 async: false,
 data:$(this).serialize(),
 success:function(result){

 $('#response').load('<?php echo base_url().'Products/menu';?>');
 }
 });
 });
});

由于其他页面中的产品会被隐藏，所以不会在选择器$("#form")的范围内。因此无法将点击事件绑定到所有。

您可以将事件监听器添加到函数中，并在页面更改时调用该函数。

function AddToCart(){
$("#form").click(function(event){
 event.preventDefault();
 $.ajax({
 url:'<?php echo base_url().'cart/add/';?>',
 type:'POST',
 async: false,
 data:$(this).serialize(),
 success:function(result){

 $('#response').load('<?php echo base_url().'Products/menu';?>');
 }
 });
 });
}

$(function(){AddToCart();} 同样，您可以在页面更改时调用此函数

【讨论】：