jQueryのクリック機能は、最初のクリック後にのみ機能します。

Question

フォームに基づいて入力ボタンを含むランディングページを開発しています。ユーザーはフォームに電子メールを追加し、入力によってカタログをダウンロードします。私はフォームフィールドを検証するためにjQuery Validateを使用しています。ユーザーが有効な電子メールを送信すると、PDFのダウンロードが開始され、ライトボックスにメッセージが表示されます。私の問題は、ライトボックスは2回目のクリック後にのみ表示されることです。 JS

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

そしてここにある：ここで

は、フォームのHTMLで

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

ここでの問題は、あなたが後にリスナーを結合していることです送信コールバックを送信すると、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 2

試してみてください。

$(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 3

submitHandlerは、入力の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!'); 
         } 
        } 
       }); 

       //}); 
      } 
      }) 
     });