Question

我正在使用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();但问题仍然相同。

Answer 1

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

或者，因为您之前已经存储了jQuery对象：

formrandom1473.unbind();

如果unbind对您不起作用，请尝试相反，但在$.ajax之前移动它：

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

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

Answer 2

在引用此comment之后，表单最终可以在我使用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;

包含jcarousel脚本时，Ajax表单提交两次

2 个答案: