在提交任何内容之前，必须两次按Enter(或按钮)

Question

我有一个奇怪的小问题。我希望我的提交按钮无需在贴上贵族上做任何事情。所以我谷歌搜索并遇到了这件代码。

<form id="search" onsubmit="myFunction(); return false;" >
    <table>
        <tr>
            <td><input type="text" name="s" id="str" placeholder="Search"></td>
            <td><button class="btn form-button btn-default"><i class="fa fa-search"></i></button></td>
        </tr>
    </table>
</form>

代码：onsubmit="myFunction(); return false;"阻止Submit/reload，并且myFunction运行此功能：

function myFunction() {
    $('.form-button').on('click', function(){
        jQuery.fancybox({
            width  : 600,           
            height: 600,    
            openEffect: 'fade',
            closeEffect: 'fade',          
            href: 'search-post-results.php',
            type: "ajax",
                ajax: {
                    type: "POST",
                    data: {
                        value:$('#str').val()
                    }
                }
        });
    });
}

现在奇怪的是，就像主题所说的那样。在发生任何事情之前，我必须单击"搜索"按钮或点击返回两次？有人知道为什么这会发生吗？我已经搜索了Google，但是没有什么可以与我的问题有关。即使在其他计算机上，我也尝试过Chrome，Firefox和Opera。而且总是一样。任何人？预先感谢！

Answer 1

我的功能仅在单击时触发。您还添加了另一个点击功能。因此，这应该是问题。这应该是正确的功能

  function myFunction() {   
            jQuery.fancybox({
                width  : 600,           
                height: 600,    
                openEffect: 'fade',
                closeEffect: 'fade',          
                href: 'search-post-results.php',
                type: "ajax",
                    ajax: {
                        type: "POST",
                        data: {
                            value:$('#str').val()
                        }
                    }
            });
    }

Answer 2

问题是因为您仅连接jQuery click处理程序，该处理程序在首次单击后调用了花式框。您还将在每个连续的点击中添加另一个点击处理程序。

而不是在表单的submit事件上使用单个事件处理程序。然后，您还可以轻松地防止表单提交并同时显示您的fancybox。尝试以下操作：

$(function() {
  $('#search').on('submit', function(e) {
    e.preventDefault();
    jQuery.fancybox({
      width: 600,
      height: 600,
      openEffect: 'fade',
      closeEffect: 'fade',
      href: 'search-post-results.php',
      type: "ajax",
      ajax: {
        type: "POST",
        data: {
          value: $('#str').val()
        }
      }
    });
  });
});

<form id="search">
  <table>
    <tr>
      <td>
        <input type="text" name="s" id="str" placeholder="Search">
      </td>
      <td>
        <button class="btn form-button btn-default">
          <i class="fa fa-search"></i>
        </button>
      </td>
    </tr>
  </table>
</form>