javascript - 表单提交连接到 js 事件不起作用

Question

我有以下代码:

  <form action="" id="search-form">
    <fieldset>
      <div class="rowElem">
        <input type="text">
        <a href="#" onClick="document.getElementById('search-form').submit()">
        <div>Search</div>
        </a></div>
    </fieldset>
  </form>

<script>
$(document).ready(function() {
$('#search-form').submit(function(event){
    event.preventDefault();
    alert("test");

});
});
</script>

当我提交表单时，我没有看到警报...我错过了什么？

谢谢

Answer 1

您需要删除干扰性的 onclick 事件并绑定(bind)到链接。

提交后您无法发出警报，因为这将执行您对表单执行的任何操作(很可能会让您离开页面。如果您坚持这样做，则以下操作将起作用。

<form action="" id="search-form">
    <fieldset>
        <div class="rowElem">
            <input id="name" type="text"></input>
            <a href="#" id="search" >Search</a>
        </div>
    </fieldset>
</form>       

<script>
    $(document).ready(function() {
        $('#search').bind('click', function () {
            // Alert the name BEFORE you do the form post
            alert($('#name).val());
            $('#search-form').submit(function(event){

            });
        });
    });
</script>

我这里有一个有效的 JSFiddle 示例:http://jsfiddle.net/7jqUF/5/

如果您需要 AJAX 解决方案，则需要执行表单发布以外的其他操作，例如 ajax 发布

<script>
    $(document).ready(function() {
        $('#search').bind('click', function () {
            // Alert the name BEFORE you do the form post
            alert($('#name).val());
            $.post('/ServerUrl/method', { name: $('#name').val() });
        });
    });
</script>