기본 이벤트 방지 - jquery

Question

많은 포스트에서 자주 나오는 질문이지만 수십 개의 답변을 읽은 후에도 내 코드에서 무엇이 잘못되었는지를 알 수 없습니다.

요점은 기본 제출을 방지하고 응답 항목에서 응답 데이터를 검색하는 것입니다. 실제로 코드가 나를 직접 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> 
   

   더 : 당신이 script 태그 어떤 이유로 갈 곳을 제어하지 않는 경우

   • YUI Best Practices for Speeding Up your Website
   • Google Closure engineers on when DOM elements are ready to 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>