jQuery Ajax表单提交无视'成功'功能，重新加载页面

Question

我正在提交一个html表单到一个MySQL数据库与jQuery .ajax。当我提交表单时（所有字段都经过验证），数据将作为新记录插入到数据库中，但成功函数不会运行。

jsFiddle

*这是在谷歌地图信息窗口都正在发生，但我不知道这是相关的。

HTML：

<div id="formDiv"> 
    <form name="htmlForm" id="htmlForm"> 

    <p id="contactP"> 
    <label for="contact">Email:</label> 
    <input type="text" name="contact" id="contact"/> <br/> 
    </p> 

    <p id="phoneP"> 
    <label for="phone">Phone:</label> 
    <input type="text" name="phone" id="phone"/> <br/> 
    </p> 

    <p id="datepickerP"> 
    <label for="datepicker">Date:</label> 
    <input type="text" name="date" id="datepicker"/> <br/> 
    </p> 

    <p id="latP"> 
    <label for="lat">Latitude:</label> 
    <input type="text" name="lat" id="lat" class="location"/> <br/> 
    </p> 

    <p id="lngP"> 
    <label for="lng">Longitude:</label> 
    <input type="text" name="lng" id="lng" class="location"/> <br/> 
    </p>   

    <p id="descP"> 
    <label for="desc" id="dos">Description of Sighting:</label> <br/> 
    <textarea name="desc" id="desc"></textarea><br/> 
    </p> 

    <input type="submit" class="button" id="submitBtn" value="Post Sighting!" onClick="postSighting();"/> 

</div> 

的Javascript/jQuery的：

function postSighting() { 
    // jQuery Validate 
    $('#htmlForm').validate({ 
     rules: { 
      contact: {required:true, email:true}, 
      phone: {required:true}, 
      date: {required:true, date:true}, 
      lat: {required:true}, 
      lng: {required:true}, 
      desc: {required:true}, 
     }, 
     messages: { 
      desc: 'Please be descriptive!' 
     }, 
     errorPlacement: function(error, element) { 
      error.appendTo($('#' + element.attr('id') + 'P')); 
      return false; 
     }; 
    }); 

    //jQuery ajax form submit 
     var contact = $('input#contact').val(), 
      phone = $('input#phone').val(), 
      date = $('input#datepicker').val(), 
      lat = $('input#lat').val(), 
      lng = $('input#lng').val(), 
      desc = $('textarea#desc').val(); 
     var dataString = "contact=" + contact + '&phone=' + phone + "&date=" + date + "&lat=" + lat + "&lng=" + lng + "&desc=" + desc; 
     $.ajax({ 
      type: "POST", 
      url: "Includes/test.php", 
      data: dataString, 
      error: function(xhr, ajaxOptions, thrownError){ 
       alert(xhr.status); 
       alert(ajaxOptions); 
       alert(thrownError); 
      }, 
      beforeSend: function() { 
       return $('#htmlForm').validate().form(); 
      }, 
      success: function() { 
       $('#formDiv').html('<div id="message"></div>'); 
       $('#message').html('<h2>Thank You!</h2>') 
        .append('<h3>Your sighting has been reported</h3>')  
       return false; 
      } 
     }); 
     return false; 
    }; 

我已经惊动了jQuery的AJAX错误，我越来越：

警报（XHR）; => 0

警报（thrownError）=>错误

http://jsfiddle.net/rhewitt/u3C4U/

Answer 1

尝试此代替javascript函数内联：

$("#map_canvas").on('click', '.submitBtn', function(e){ 
    e.preventDefault(); 
    postSighting();   
}); 

Answer 2

jQuery的无法连接到提交按钮时，如它具有ID submitBtn并且您尝试附加到类 submitBtn。

变化来自：

$('.submitBtn').click(function(e){ 
    e.preventDefault(); 
    postSighting();   
}); 

到：

$('#submitBtn').live("click", function(e){ 
    e.preventDefault(); 
    postSighting();   
}); 

还要注意使用.live()因为表单created dynamically。