我有一个看起来像这样的表格:

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

当我绑定(bind)到表单的submit($("vote_form").submit())时,似乎无法访问用户单击的图像。因此,我尝试绑定(bind)到单击图像本身($(".vote_down, .vote_up").click()),该图像总是提交表单,无论我是否尝试
  • 返回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代码需要一点爱。例如,我添加到序列化函数的方法似乎不起作用。这样做:
        $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)
        });
    });
    

    09-10 10:55
    查看更多