阻止默认事件-jquery

Question

我知道这是一个经常出现在很多帖子中的问题，但即使在阅读了几十个答案后，我仍然无法弄清楚我的代码中出了什么问题。

重点是防止默认提交并检索应答div中的响应数据。代码实际所做的是将我直接发送到geocoder.php页面。

非常感谢

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
/* attach a submit handler to the form */
$("geostring").submit(function(event) {
  /* stop form from submitting normally */
  event.preventDefault();
  /* get some values from elements on the page: */
  var $form = $( this ),
      term = $form.find( 'input[name="geo"]' ).val(),
      url = $form.attr( 'action' );
  /* Send the data using post */
  var posting = $.post( url, { s: term } );
  /* Put the results in a div */
  posting.done(function( data ) {
    var content = $( data ).find( '#content' );
    $( "#answer" ).empty().append( content );
  });
});
</script>

<form action="http://winefy.alwaysdata.net/geocoder.php" method="POST" id="geostring">
<input type=text name="geo" placeholder="Address..." />
<input type="submit" value="Geocode" />
<div id="answer"></div>
</form>

Answer 1

两件事：

1. 正如DCoder在下面的注释中指出的那样，您的选择器缺少#。它应该是$("#geostring")，而不是$("geostring")。

2. 您正试图在form元素存在之前附加处理程序。因此$("#geostring")返回一个空的jQuery集，并且没有挂接任何处理程序。

   只需将script标记放在form之后即可。

   <form action="http://winefy.alwaysdata.net/geocoder.php" method="POST" id="geostring">
   <input type=text name="geo" placeholder="Address..." />
   <input type="submit" value="Geocode" />
   <div id="answer"></div>
   </form>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script>
   /* attach a submit handler to the form */
   $("#geostring").submit(function(event) {
     /* stop form from submitting normally */
     event.preventDefault();
     /* get some values from elements on the page: */
     var $form = $( this ),
         term = $form.find( 'input[name="geo"]' ).val(),
         url = $form.attr( 'action' );
     /* Send the data using post */
     var posting = $.post( url, { s: term } );
     /* Put the results in a div */
     posting.done(function( data ) {
       var content = $( data ).find( '#content' );
       $( "#answer" ).empty().append( content );
     });
   });
   </script>
   

   更多：

   • YUI加速网站的最佳实践
   • 谷歌闭包工程师了解DOM元素何时可以编写脚本

   或者，如果由于某种原因无法控制script标记的位置，可以使用jQuery的ready事件将代码延迟到DOM加载。

   $(function() {
       // ...your code here...
   });
   

   或更详细地说：

   $(document).ready(function() {
       // ...your code here...
   });
   

Answer 2

您可以始终使用常见的方法：

<form onsubmit="return myFunc();"></form>
<script type="text/javascript">
function myFunc(){
    // Your jQuery Code
    return false;
}
</script>