我有一个看起来像这样的表格:
<form action="/vote/" method="post" class="vote_form"> <input type="hidden" name="question_id" value="10" /> <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" /> <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" /> </form>
当我绑定到表单的submit($(“vote_form”)。submit())时,我似乎没有访问用户点击的图像。所以我试图绑定点击图像本身($(“。vote_down,.vote_up”)。click()),它始终提交表单,无论我是否尝试
> return false;
> event.stopPropogation();要么
> event.preventDefault();
因为所有这些都是形式事件。
>我应该将$ .post()附加到form.submit()事件,如果是,请告诉用户点击哪个输入,或
>我应该将我的$ .post()附加到图像点击中,如果是这样,如何防止表单也提交。
这是我现在的jQuery代码:
$(".vote_up,.vote_down").click(function (event) { $form = $(this).parent("form"); $.post($form.attr("action"),$form.find("input").serialize() + { 'submit': $(this).attr("value") },function (data) { // do something with data }); return false; // <--- This doesn't prevent form from submitting; what does!? });
解决方法
根据Emmett的回答,我对此的理想解决办法就是用JavaScript本身来杀死表单的提交,就像这样:
$(".vote_form").submit(function() { return false; });
这完全奏效
为了完整,我原来的一些JS代码需要一点爱。例如,我添加到serialize函数的方式似乎不起作用。这样做:
$form.serialize() + "&submit="+ $(this).attr("value")
这是我的整个jQuery代码:
$(".vote_form").submit(function() { return false; }); $(".vote_up,.vote_down").click(function(event) { $form = $(this).parent("form"); $.post($form.attr("action"),$form.serialize() + "&submit="+ $(this).attr("value"),function(data) { // do something with response (data) }); });