jQuery 아약스 양식은 여전히 ​​페이지 새로 고치기와 함께 제출합니다.

Question

페이지 새로 고침없이 양식을 제출해야하는 매우 간단한 jQuery AJAX 코드가 있지만 왠지 무시되고 양식이 정상적으로 제출되고 있습니다.

JQuery와 코드 :

$(".createEvent").live('click', function() { 

       $(".eventResult").html($("<img/>").attr("src", "<?php echo __FULL_PATH; ?>images/loader.gif").attr("id", "loader")); 
       $('.eventResult').show(); 
       var form = $(this).parents('form:first'); 
       var eventName = $("input[name='eventName']",form).val(); 
       var eventID = $("input[name='eventName']",form).id(); 

        var dataString = 'eventName ='+ eventName; 
        $.ajax({ 
        type: "POST", 
        url: "{site.createPageURL}"+eventID+"/event/", 
        data: dataString, 
        cache: false, 
        success: function(html) { 
        alert('done'); 
        $('.eventResult').html(html); 
        $('.eventForm').hide(); 
        updateBookingList(eventID);    

        } 
       }); 
       return false; 

     }); 

양식 :

<form id="eventForm_1318915800" method="POST" action="path_here..." name="eventForm"> 
<label for="eventName">Please enter a name for the event</label> 
<input id="1318915800" type="text" name="eventName"> 
<label for="submit">&nbsp;</label> 
<input class="createEvent" type="submit" value="Create event" name="submit"> 
</form> 
<div id="eventResult_1318915800" class="eventResult">&nbsp;</div> 

Answer 1

이 중간에 JS 오류의 표시가 - 무시되는 return false

Answer 2

당신은 추가해야합니다 ajax를 호출하기 전에 event.preventDefault();. 귀하의 기능은 다음과 같이 수정되어야합니다 :

$(".createEvent").live('click', function(event) { 
    event.preventDefault(); 
    . 
    . 
    . 
    //ajaxCall 
}); 

Answer 3

당신을 제출 양식을 중지하려면이하고 아마 더 나은 :

$("#eventForm_1318915800").submit(function() { return false; }); 

이것은 또한이 입력에 의해 트리거 제출할 처리 할 수 ​​있기 때문에 더 키 예를 들어.