单击提交按钮后如何绑定一次功能？对于 jquery ajax 表单答案

【问题标题】：how can i bind function one time once i click submit button? for jquery ajax form单击提交按钮后如何绑定一次功能？对于 jquery ajax 表单
【发布时间】：2014-03-11 14:20:59
【问题描述】：

我用 django 做一个网站。我想让人们在我的网站上创建群组。所以我使用 html 表单让他们填写信息并上传图片作为群组徽标。因为我想让人们预览徽标，所以我先使用 ajax 上传图片文件。我在页面中添加了 2 个按钮，按钮 1 用于以 ajax 方式上传图片文件，按钮 2 用于将整个表单发布到服务器。对于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，是的图片上传到我的主机，我通过一切都ok。然后我第二次测试，这次，同样的图片文件，上传2次，我在主机中找到2张相同的图片，我第3次测试，相同的图片上传3次。现在我知道问题出在哪里了。我认为问题出在，每次我单击按钮 id #tnpicsubmit 时，它都会向表单提交事件添加相同的功能，这就是为什么每次我上传 +1 次图片。

如何解决这个问题？我的意思是，只需单击一次，上传一张图片，即可上传 ajax 文件。

【问题讨论】：

没有验证的原因？
你可以试试我的代码，然后你就会知道我的问题。问题是，我为某个按钮单击事件添加了一个表单提交添加句柄。如何每个.my 代码每次添加 +1 次单击按钮的时间。那不是我想要的。
我的意思是你为什么不验证它，看看它是否被点击并具有相同的先前数据...验证。

标签： javascript jquery ajax django

【解决方案1】：

我了解您的问题，请尝试使用one()：

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

【讨论】：

我认为 OP 希望为每个提交事件调用提交事件的回调，但不想一遍又一遍地绑定提交处理程序
嗨。我只希望表单有一次提交到 ajax 的句柄。问题是，用我的方式，每次我点击按钮#tnpicsubmit，它都会添加 +1 次相同的提交句柄到表单，然后同一张图片上传+1次。你可以试试我的代码，然后你就会明白
@zzlettle 如果你想让我测试它，你应该提供一个 jsfiddle，否则，我不会......也就是说，所以这个答案不是你想要的？！

【解决方案2】：

您正在单击事件中添加提交处理程序，然后调用它。每次单击按钮时它都会添加另一个处理程序。通过将提交处理程序移到单击事件之外来解决此问题。

<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。

【讨论】：