Question

我有这个奇怪的小问题。我希望我的提交按钮不会在提交上执行任何操作。所以我用Google搜索并发现了这段代码。

<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

myFunction仅在点击时触发。您还在其中添加了另一个单击功能。那应该是问题所在。这应该是正确的功能

  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

问题是因为你只附加了第一次点击后调用FancyBox的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>

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

2 个答案: