0

我正在使用 Ajax 提交表单，但是当我单击“添加到购物车”按钮时，表单将提交两次，但如果我删除 jcarousel ，表单将像往常一样提交。

<form id="formrandom1473" name="formrandom1473" method="post" action="ajax_process.php?case=add_product_ajax&amp;pid=1473">
   <input type="hidden" value="1473" name="products_id">
   <input type="hidden" value="1" name="qty">
   <div class="add_to_cart_div">
      <input type="image" border="0" id="add-to-cart-1473" title=" Add to Cart " alt="Add to Cart" src="includes/languages/english/images/buttons/button_in_cart.gif">
   </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $("#add-to-cart-1473").click(function () {

     var formrandom1473 = $("#formrandom1473");
     formrandom1473.submit(function () {

        $.ajax({
            type: formrandom1473.attr("method"),
            url: formrandom1473.attr("action"),
            data: formrandom1473.serialize(),
            success: function (data) {
                $("#output").html(data);
                $(".message_div").addClass("message_success").slideDown().delay(6000).slideUp(); // Div success
                $(".cart_counter").load("ajax_process.php?case=cart_counter"); // Load new quantity / by quantity   
                $(".shopping_cart_box").load("ajax_process.php?case=shopping_cart_box"); // Load new shopping cart box / by product     
                $(".cart_dropdown").load("ajax_process.php?case=cart_dropdown"); // Load new shopping cart box / by product                             
            }
        });
            $("formrandom1473").unbind();
        return false;
     });    

    /* Effect */
        var productX = $("#cart-image-1473").offset().left;
        var productY = $("#cart-image-1473").offset().top;
        var basketX = $("#boxcart-content").offset().left;
        var basketY = $("#boxcart-content").offset().top;
        var gotoX = basketX - productX;
        var gotoY = basketY - productY;
        var newImageWidth = $("#cart-image-1473").width() / 3;
        var newImageHeight = $("#cart-image-1473").height() / 3;

        $("#wrapper").html("");
        $("#wrapper").css({"position":"absolute","top": productY,"left": productX});

        $("#cart-image-1473").clone()
            .prependTo("#wrapper")
            .css({"position" : "absolute", "border" : "1px dashed black"})
            .animate({opacity: 0.6})
            .animate({opacity: 0.0, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200,
            function() {
            });
    /* Effect */    

    }); //click

}); //ready
</script>

<script type="text/javascript">
$(document).ready(function() {
    $('.mycarousel').jcarousel();
});
</script>

我尝试使用$("formrandom1473").unbind();但问题仍然相同。

4

2 回答 2

0

您的意思是使用$("#formrandom1473").unbind();with the#代替吗？

或者，由于您之前已经存储了 jQuery 对象：

formrandom1473.unbind();

如果 unbind 对您不起作用，请尝试此操作，但将其移至$.ajax:

formrandom1473.submit(function() { return false; });

此外，检查您的 JS 控制台是否有任何错误。

于 2013-07-22T04:29:10.147 回答
0

参考此评论后..表格终于可以在我使用后正常提交e.stopImmediatePropagation();

formrandom1473.submit(function (e) {
$.ajax({
    type: formrandom1473.attr("method"),
    url: formrandom1473.attr("action"),
    data: formrandom1473.serialize(),
    success: function (data) {
        $("#output").html(data);
        $(".message_div").addClass("message_success").slideDown().delay(6000).slideUp(); // Div success
        $(".cart_counter").load("ajax_process.php?case=cart_counter"); // Load new quantity / by quantity   
        $(".shopping_cart_box").load("ajax_process.php?case=shopping_cart_box"); // Load new shopping cart box / by product     
        $(".cart_dropdown").load("ajax_process.php?case=cart_dropdown"); // Load new shopping cart box / by product                             
    }
});
e.stopImmediatePropagation();
return false;
于 2013-07-22T04:41:20.887 回答