使用 jquery 提交表单时 preventDefault 的递归问题答案

【问题标题】：recursion issue with preventDefault on form submit with jquery使用 jquery 提交表单时 preventDefault 的递归问题
【发布时间】：2011-05-09 16:31:04
【问题描述】：

我有一个接受一些输入的表格，那里的一切都很漂亮。我想从这个表单中获取一个输入值并通过 jquery 将其分配给一个隐藏值。为此，我编写了以下内容：

<script type="text/javascript">
    jQuery(document).ready(function() {
        function preventDefault(e){
            e.preventDefault();
        }

        jQuery('#rsvp-form').bind('submit', preventDefault);
        jQuery('#rsvp-form').submit(function(e) {
            var emailvalue = jQuery('#personemail\\[0\\]').val();
            jQuery('#person_email').val(emailvalue);
            alert(jQuery("#person_email").val());
            jQuery('#rsvp-form').unbind('submit', preventDefault);
            jQuery(this).trigger('submit');
        });
    });
</script>

我将 .preventDefault 绑定到提交，并且更改我的值没有问题。问题是在更改值后提交表单。无论我尝试过什么，它都会以无限循环结束。如果我删除触发器或 .submit() 或类似的东西，然后将其保留为 unbind，则不会发生任何事情。在这一点上有点难过。

【问题讨论】：

为什么首先需要 preventDefault？
#person_email 字段已隐藏。需要 preventDefault 才能停止提交，以便我可以从表单上的另一个输入（在本例中名为 personemail[0]）为隐藏字段分配一个值，然后提交表单。

标签： jquery forms submit preventdefault

【解决方案1】：

你不应该需要这些。如果您想在表单提交之前设置该值，您可以像这样轻松地这样做：

jQuery(function() {
    jQuery('#rsvp-form').submit(function(e) {
        var emailvalue = jQuery('#personemail\\[0\\]').val();
        jQuery('#person_email').val(emailvalue);
    });
});

【讨论】：

【解决方案2】：

你需要调用原生的submit方法，而不是触发jQuery事件。

jQuery('#rsvp-form').submit(function(e) {
    var emailvalue = jQuery('#personemail\\[0\\]').val();
    jQuery('#person_email').val(emailvalue);
    alert(jQuery("#person_email").val());
    jQuery('#rsvp-form').unbind('submit', preventDefault);
    this.submit(); // <-- this line here
});

【讨论】：

谢谢。这很完美，但是看起来猎人是对的，在我的情况下，我真的不需要打扰 preventDefault 的东西。非常感谢您的帮助，我会定义的。记住触发器和使用本机方法之间的区别。