我正在开发一个模块,用Ajax分页系统加载Virtumemart产品。
这很简单,例如第一次加载有4个产品带有“加载更多”按钮,当它被点击时,将使用无限滚动和手动触发javascript插件将4个产品加载到页面。
问题是“添加到购物车”按钮仅适用于首批加载的产品(前4个产品已加载,但不会通过Ajax对新添加的产品起作用。)
我不知道“添加到购物车”系统是如何工作的,但我认为这是因为已经加载的“vmprices.js”并且它不会通过Ajax对新添加的产品产生影响
请您建议一个解决方案,通过Ajax使添加到购物车选项适用于新加载的产品(页面不会刷新或再次加载,只有产品通过Ajax加载)
在无限滚动中有一个回调函数我想我应该在那里添加一些代码来重新加载脚本以识别新添加的产品:
$container.infinitescroll({
navSelector : '#page_nav',
nextSelector : '#page_nav a',
itemSelector : '.item',
debug : false,
path:["fetcher.php?modid=93&perpage=3&page=", ""],
behavior: 'twitter',
loading: {
finishedMsg: '<p class="msg">No more pages</p>',
img: 'loading.gif',
msgText: "<em>Loading</em>",
speed: 'slow'
}
},
function( newElements ) {
$container.iso( 'insert', $( newElements ) );
}
);
提前谢谢你,这是我唯一的选择。
答案 0 :(得分:0)
由于点动事件未在动态加载的HTML部分上触发,可能会发生这种情况。
当Ajax加载的内容在浏览器中显示4个产品时,其点击事件不起作用bcoz点击事件注册时间那些HTML部分不在文档中。
解决方法是检查添加到购物车按钮代码,其中使用正常的jQuery click()
将其更改为基于您on()
版本的live()
或jQuery
事件。
例如:
jQuery('.addtocart').click(function(){
//code for adding items to the cart
});
如果您使用jquery 1.7或更低版本,请更改为使用live()
jQuery('.addtocart').live('click',function(){
//code for adding items to the cart
});
对于上面的jQuery1.7版本。
jQuery('.addtocart').on('click',function(){
//code for adding items to the cart
});
希望它的作品......