Запретить событие по умолчанию - 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 Best Practices for Speeding Up your Website
   • Google Closure engineers on when DOM elements are ready to 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>