單擊提交按鈕后，如何一次綁定功能？對於jQuery Ajax形式

Question

我用django做一個網站。 我想讓人們在我的網站上創建群組。所以我使用html表單讓他們填寫信息並上傳圖片作為群組徽標。 因為我想讓人們預覽徽標，所以我先使用ajax上傳圖片文件。我在頁面中添加了2個按鈕，button1用於以ajax方式上傳圖片文件，button2用於將整個表單發布到服務器。 ajax上傳圖片，我使用此插件http://malsup.com/jquery/form/好的，這是代碼

<!doctype html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script> 
<script src="jquery.form.min.js"></script> 

<meta charset="utf-8">
<title>test</title>
</head>
<body>




<form id="test" action="/accounts/signup/" method="post">
<input type="text" id="text" name="text" />
<input type="file" name="file" id ="file" /> <a href="javascript:;" class="btn_gray_light" id="tnpicsubmit"><span >submitpicture</span></a>

<a href="javascript:;" class="btn_celadon_large signup"><span>confirm</span></a>
</form>



<script language="javascript" type="text/javascript">
$("document").ready(function(){

$("#tnpicsubmit").click(function(){
    $("#form").submit(function(){
       var options={
            url:"/article/nodetpic/",
            type:"POST",
            datatype:"json",


        };

        $("#form").ajaxSubmit(options);
        return false;
    }).submit();

});


$(".signup").click(function(){
    $("#test").submit()

});
})

</script>

</body>
</html>

此代碼有效，但效果不佳。 因為，第一次我選擇一張圖片，然后單擊按鈕ID #tnpicsubmit，是將圖片上傳到我的主機，我通過所有事情都可以。然后我進行了第二次測試，這次是相同的圖片文件，上傳2次，我在主機中找到2張相同的圖片，並且我進行了3次測試，同一張圖片上傳了3次。現在我知道了問題所在。我認為問題出在我每次單擊按鈕ID #tnpicsubmit時，都會向表單提交事件添加相同的功能，這就是為什么每次我上傳+1次圖片的原因。

如何解決這個問題？我的意思是，只需單擊一下，一次上傳一張圖片即可上傳ajax文件。

Answer 1

據我了解您的問題，請嘗試使用one() ：

$("#form").one('submit', function(){...});

Answer 2

您要在click事件中添加提交處理程序，然后對其進行調用。 每次您單擊按鈕時，它將添加另一個處理程序。 通過將提交處理程序移到click事件之外來解決此問題。

<script language="javascript" type="text/javascript">
$("document").ready(function(){
    $("#form").submit(function(){
       var options={
            url:"/article/nodetpic/",
            type:"POST",
            datatype:"json",


        };

        $(this).ajaxSubmit(options);
        return false;
    });


$("#tnpicsubmit").click(function(){
    $("#form").submit();
});


$(".signup").click(function(){
    $("#test").submit()

});
})

</script>

我在html中看不到#tnpicsubmit。 但這可能是一個，因此您可以使用更少的JavaScript。

單擊提交按鈕后，如何一次綁定功能？對於jQuery Ajax形式

問題描述

2 個解決方案

解決方案1
1 2014-03-11 14:25:09

解決方案2
0 2014-03-11 15:23:11

單擊提交按鈕后，如何一次綁定功能？ 對於jQuery Ajax形式

問題描述

2 個解決方案

解決方案1 1 2014-03-11 14:25:09

解決方案2 0 2014-03-11 15:23:11

單擊提交按鈕后，如何一次綁定功能？對於jQuery Ajax形式

解決方案1
1 2014-03-11 14:25:09

解決方案2
0 2014-03-11 15:23:11