此处提供:http://syllableapp.com/test
基本上,在Safari、Chrome、Opera、Webkit Nightly等中,该表单的工作效果非常漂亮,完全符合预期。不过,在Firefox中,提交时。。。什么都不做。为什么会这样?
这是我的JavaScript:
$(document).ready(function() {
$('input[type="submit"]').click(function() {
event.preventDefault();
var email = $.trim($('.email').val());
var emailRegEx = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
if (email == "" || !emailRegEx.test(email)) {
$(this).effect("shake", { times:2 }, 75);
}
else {
var data = "email=" + email;
$.ajax({
type: "POST",
url: "register_email.php",
data: data,
success: function(data) {
if (data == 1) {
$('form').hide();
$('form').html("<p class='success'>You'll be notified! Welcome aboard.</p>");
$('form').fadeIn(300);
}
else {
$('form').hide();
$('form').html("<p class='error'>Dang, there was an error. <a href='mailto:me@christianselig.com'>Email me?</a></p>");
$('form').fadeIn(300);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: " + errorThrown);
$('form').hide();
$('form').html("<p class='error'>Dang, there was an error. <a href='mailto:me@christianselig.com'>Email me?</a></p>");
$('form').fadeIn(300);
}
});
}
});
});
还有我的PHP:
<?php
$db = new mysqli("localhost", "swuclu_emailer", "etreadmill:(", "swuclu_syllable_emails");
if ($db->connect_error) {
echo "0";
}
else {
$email = $_POST["email"];
$stmt = $db->prepare("INSERT INTO emails (email) VALUES (?)");
$stmt->bind_param("s", $email);
$stmt->execute();
echo 1;
}
?>
除了Firefox之外,其他浏览器到底在做什么?
当页面更改时,使控制台中的错误持续存在。
你会看到这个错误:
ReferenceError: event is not defined
http://syllableapp.com/test/scripts/scripts.js
Line 3
它将带您进入代码:
$(document).ready(function() {
$('input[type="submit"]').click(function() {
event.preventDefault(); //<--- here
从中可以看出,事件没有定义。因此出现了错误。
因此,将变量事件添加到函数参数列表中
$('input[type="submit"]').click(function(event) { //<-- added variable
在scripts.js
文件中
$(document).ready(function() {
$('input[type="submit"]').click(function() {
event.preventDefault();
这应该是
$(document).ready(function() {
$('input[type="submit"]').click(function(event) {
event.preventDefault();
否则事件未定义