Question

我有一个表单，我不想在第一次点击提交时提交，但第二次它应该像正常提交一样工作。所以我在加载时在表单中添加了not-submittable类，然后在第一次单击后删除该类...应该（我认为）使其正常提交。但是，这不会发生。第一次单击按预期工作，删除该类并更改按钮文本。然而，第二次点击完全相同。那么，我在这里错过了什么？

jQuery的：

  $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').addClass('not-submittable');

  $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').click(function(event) {
      $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable');
      $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue');
      $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled');
    return false;
  });

预javascript按钮：

<input type="submit" class="Button" value="Submit Survey" id="ACTION_SUBMIT_SURVEY_RESPONSE" name="ACTION_SUBMIT_SURVEY_RESPONSE">

Answer 1

引用OP：“我有一张表格，我不想先提交单击时间提交，但第二次它应该像一个工作正常提交。“

使用jQuery .one()仅在首次点击时屏蔽submit。

http://api.jquery.com/one/

$('#ACTION_SUBMIT_SURVEY_RESPONSE').one('submit', function(e) {
    e.preventDefault();
    // do what you need to do on first click
}

...替代地

$('#ACTION_SUBMIT_SURVEY_RESPONSE').one('submit', function(e) {
    e.preventDefault();
    // do what you need to do on first click
    if ( some-condition ) {  // under certain conditions allow submit on first click
        $(this).submit();
    }
}

Answer 2

请尝试使用.click()和.on()方法绑定和取消绑定事件，而不是使用.off()。在你的情况下：

$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').on("click.stopSubmit", function(event) {

    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable');
    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue');
    $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled');

    if (...conditions are met.....) {
        $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').off("click.stopSubmit");
    }

    return false;
});

您可能会注意到.on()方法的第一个参数是处理程序的字符串表示形式，但我附加了命名空间“.stopSubmit”。命名空间处理程序允许您取消绑定一个特定的单击处理程序，而不是所有单击处理程序。关于这一点的最好的部分是，如果你仍然想要使用原始处理程序中的代码，你可以创建一个单独的单击处理程序来运行该代码，当你取消绑定“.stopSubmit”处理程序时，它不会被解除绑定。 / p>

请注意，.on()和.off()是推荐的绑定/取消绑定方法 - jQuery不再推荐.bind()和.unbind()。

的更新
在阅读了关于不解除绑定的评论之后，在满足某些条件之后，我想指出您可以在条件中插入.off()调用。我已更新代码以反映这一点。

Answer 3

如果某些条件必须匹配，请使用submitable包含您的逻辑，以便发送表单：

var submit = $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE');
submit.addClass('not-submittable');

submit.click(function(event) {
    if (true == submitable) {
        submit.removeClass('not-submittable').val('Continue').removeAttr('disabled');
        submit.unbind();
        event.preventDefault();
    }
});

Answer 4

你可以做这样的事情

 $(document).ready(function () {

         $('#ACTION_SUBMIT_SURVEY_RESPONSE').click(function (event) {
             if (!$('#ACTION_SUBMIT_SURVEY_RESPONSE').hasClass(".not-submittable")) {

                 //do all conditions you wish on first click

                 //if condidition meets add this class to button
                 $('#ACTION_SUBMIT_SURVEY_RESPONSE').addClass(".not-submittable");

                 //stop form submit
                 event.preventDefault();
             }
             else {

                 //calls when button have .not-submittable class may be second or any no of clicks
                 $('#ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable');
                 $('#ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue');
                 $('#ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled');
                 //commented return false so form submits normally
             }
         });

     });

防止表单提交工作......太好了

4 个答案: