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

两件事：

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

您尝试在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>

更多：

或者，如果您由于某种原因无法控制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>

防止默认事件 - jquery

2 个答案: