我的jQuery函数只能在第一次操作
My jQuery function can only operate the first time
我尝试制作一个自定义脚本来显示购物车。我想我已经差不多完成了,但我有一个问题,我只能调用一次函数。
Onhttp://articles-authors.com/order-form/您可以在右上角看到购物车,当网站加载时,已经加载了一个函数来创建购物车。但是,当尝试将鼠标悬停在购物车上时,不会发生任何事情,它应该调用另一个函数来重新创建购物车,并将该类设置为html元素#cart
的活动类。
这是代码:
首先调用购物车创建函数的函数
makeCartWithoutActive();
$("#cart").mouseenter(function(){
makeCartWithActive();
}).mouseleave(function(){
makeCartWithoutActive();
});
之所以使用mouseenter
,是因为我使用的是jQuery 2.0.3,并且live在1.7中被删除了。
在这里,你可以看到应该重新创建购物车的功能,然后将类设置为#cart
,这样购物车就会显示:
function makeCartWithActive(){
$.get("http://articles-authors.com/order-form/cart/get",function(data) {
var html = "";
if(data.msg === false){
html = '<div id="cart" class="right active">'+
'<div class="heading"><a><span id="cart-total">0 item(s) - $0.00</span></a></div>'+
'<div class="content"><div class="empty">'+data.respone+'</div></div></div>';
$("#cart").replaceWith(html);
}else{
html = '<div id="cart" class="right active"><div class="heading"><a><span id="cart-total">'+data.totalitem+' item(s) - $'+data.totalprice+'</span></a></div>'+
'<div class="content"><div class="mini-cart-info"><table><tbody>';
$.each(data.data, function(i, currProgram) {
$.each(currProgram, function(key,val) {
html += '<tr><td class="name">'+val.name+'</td><td class="quantity">x '+val.quantity+
'</td><td class="total">$'+val.price+'</td><td class="remove"><img src="http://articles-authors.com/order-form/img/remove-small.png'+
'" onclick="RemoveItem('+val.rowid+');" width="12" height="12" title="Remove" alt="Remove"></td></tr>';
});
});
html += '</tbody></table></div>'+
'<div class="mini-cart-total"><table><tbody><tr><td align="right"><b>Sub-Total:</b></td><td align="right">'+data.totalprice+'</td></tr><tr><td align="right"><b>Total:</b></td><td align="right">'+data.totalprice+'</td></tr></tbody></table></div>'+
'<div class="checkout"><a class="button" href="http://articles-authors.com/order-form/cart">Checkout</a></div></div></div>';
$("#cart").replaceWith(html);
}},
"jsonp");
}
希望有人能帮助我。我还是jQuery/JavaScript的新手,所以不知道为什么会发生这种情况。
使用委托事件处理程序
$(document).on('mouseenter', '#cart', function(){
makeCartWithActive();
});
$(document).on('mouseleave', '#cart', function(){
makeCartWithoutActive();
});
或者你可以使用
$(document).on({
"mouseenter" : function(e) { makeCartWithActive(); },
"mouseleave" : function(e) { makeCartWithoutActive(); }
}, "#cart");
$(document).on('mouseenter', '#cart', function(){
makeCartWithActive
}).on('mouseleave', '#cart', function(){
makeCartWithoutActive
});
您正在替换元素,因此处理程序将消失。您需要将函数委托给最近的静态父元素。
我选择文档,但为了性能,您应该选择更接近#cart
的内容
相关文章:
- 相同的RegExp返回不同的结果-第一次是正确的结果,第二次是null
- 删除确认对话框在第一次单击时不起作用
- Javascript:JSON请求仅在第一次工作
- 推特引导:弹出窗口不会在第一次点击时出现,但会在第二次点击时显示
- 角度提交仅进行第一次v2错误
- 设置第一次执行的超时
- 为第一次尝试Javascript的经验丰富的开发人员提供建议
- jQuery on()-不;第一次点击时无法工作
- 第一次点击动态创建的表后,点击不工作
- 在Rails中第一次单击后禁用链接,Coffeescription
- PHP和JS脚本的奇怪问题,在我刷新页面之前第一次失败
- jQuery表单验证(如果==“执行此操作”)仅适用于第一次输入
- 操作方法:第一次单击动画 1,第二次单击动画 2
- 第二次单击(而不是第一次)时的 ng 表更改页面操作
- 我的jQuery函数只能在第一次操作
- Jquery -防止在第一次单击时,允许在第二次单击时进行默认操作
- 为什么不't此操作在第一次单击时执行
- 如何使用javascript禁用网页上的第一次鼠标点击操作
- JQuery 函数只是在第一次按下提交按钮时调用控制器操作
- OnClick操作不会't不能同时工作,但只能用于第一次装载.包括现场示例