Question

我正在开发一个带有基于表单的输入按钮的登录页面。用户在表单中添加电子邮件并通过输入下载我们的目录。我正在使用jQuery Validate来验证表单字段。如果用户放置了有效的电子邮件，则会开始下载PDF并显示带有消息的灯箱。我的问题是灯箱只在第二次点击后出现。

以下是表单HTML：

<form id="formmail" action="sendmail.php" method="POST">
    <fieldset class="input">
        <label for="i-email">E-mail:</label>
        <input type="email" name="email" id="email" autocomplete="off" required>
    </fieldset>
    <fieldset class="checkbox">
        <input type="checkbox" name="news" id="news">
        <label for="i-news">Checkbox email</label>
    </fieldset>
    <fieldset class="btn">
        <div id="test" href="javascript:;">
            <input type="submit" value="Download PDF"></input>
        </div>
        <div style="display: none;" id="hidden-content">
            <p>Thank you</p>
        </div>
    </fieldset>
</form>

这是JS：

$(document).ready(function() {
  $('#formmail').validate({
    submitHandler: function(form) {
      $("#test").on('click', function() {
        $.fancybox.open({
          src: '#hidden-content',
          type: 'inline',
          opts: {
            afterShow: function(instance, current) {
              console.info('done!');
            }
          }
        });
      });
    }
  })
});

Answer 1

尝试：

$(document).ready(function() {
   $('#formmail').validate({
       submitHandler: function(form) {
         $("#test").on('click', function() {
           $.fancybox.open({
              src  : '#hidden-content',
              type : 'inline',
              opts : {
                afterShow : function( instance, current ) {
                console.info('done!');
              }
            }
         });

      });
      $("#test").trigger("click");
     }
   }) 
});

Answer 2

这里的问题是你在提交回调后绑定一个监听器，然后它只在第二次点击时可用。

我会采用不同的方式

<script>
    function lightBox() {
        $.fancybox.open({
            src: '#hidden-content',
            type: 'inline',
            opts: {
                afterShow: function (instance, current) {
                    console.info('done!');
                }
            }
        });
    }

    $(document).ready(function () {
        $('#formmail').validate({
            submitHandler: function (form) {
                lightBox();
            }
        })
    });
</script>

Answer 3

submitHandler处理输入[type ='submit']本身的onclick事件。

 $(document).ready(function() {
           $('#formmail').validate({
               submitHandler: function(form) {
                 //comment below line 
                 //$("#test").on('click', function() {
                   $.fancybox.open({
                      src  : '#hidden-content',
                      type : 'inline',
                      opts : {
                        afterShow : function( instance, current ) {
                        console.info('done!');
                      }
                    }
                 });

              //});
             }
           }) 
        });

jQuery单击功能仅在第一次单击后才起作用

3 个答案: