函數的行爲差異 - JavaScript/jQuery

我寫了一些JavaScript/jQuery代碼，它將用戶電子郵件添加到我的通訊數據庫中。有一個「訂閱」按鈕來啓動這個過程，但我也希望用戶能夠實現可用性的返回。函數的行爲差異 - JavaScript/jQuery

奇怪的是，代碼適用於按鈕，並且當返回鍵被擊中時，電子郵件被添加到數據庫，但僅當按鈕被擊中時觸發僅顯示警報的回調函數，當按下返回鍵時爲。

$('#newsletter_button').click(function(event) { 
    newsletterSignup(); 
}); 
$('#newsletter_email').bind('keyup', function(event) { newsReturn(event); }); 

function newsletterSignup() { 
    var email = $.trim($('#newsletter_email').val()); 
    if(!validateEmail(email)) { 
    alert('Please enter a valid email'); 
    return false; 
    } else { 
     // add email to database 
     $.post('newsletterSignup.php', 
       { email: email }, 
       function(data) {alert(data);} 
     ); 
     $('#newsletter_email').val(""); 
    } 
} 

function newsReturn(evt) { 
    if (evt.keyCode == 13) { 
    newsletterSignup(); 
    } 
}

該功能必須工作相同，無論它如何被稱爲肯定！就像我說的post函數顯然被稱爲兩次，因爲電子郵件被添加到數據庫。

我能想到的唯一的事情就是它與事件有關。不知道是什麼。

來源

2011-02-26 Joe

按下Enter鍵時發生的事情的瀏覽器行爲是古怪的。輸入按鈕上的提交按鈕是否被認爲是「單擊」按鈕在不同瀏覽器之間不同，並且還取決於（a）表格中按鈕的數量，以及（b）表格中文本輸入的數量。通常，當有一個文本字段和一個按鈕時，該按鈕不會被視爲「成功」，您將不會獲得單擊事件，並且按鈕的名稱/值對不會包含在提交的表單值中。

此外，輸入字段中的陷印輸入按鍵是不可靠的，不應該完成。當輸入新聞不應提交表格（例如，當IME正在使用時），在提交表格的地方（例如表格中的其他元素具有焦點）不會觸發，並且再次有瀏覽器的差異。

因此，要避免所有這些痛苦：始終綁定到包含元素的<form>上的submit事件，而不是試圖猜測哪些UI事件應該觸發該提交。

來源

2011-02-26 10:43:23 bobince

我能想到的第一件事是evt.keyCode - 嘗試使用evt.which（統一不同瀏覽器行爲的jQuery屬性）。

編輯：現在我注意到第二個提醒。您的代碼是一點點凌亂，讓我們清理，看看問題是否仍然存在：

$('#newsletter_button').click(newsletterSignup); 
$('#newsletter_email').keyup(newsReturn); 

function newsletterSignup(e) { 
    e.preventDefault(); 
    var email = $.trim($('#newsletter_email').val()); 
    if (!validateEmail(email)) { 
     alert('Please enter a valid email'); 
    } else { 
     // add email to database 
     $.post('newsletterSignup.php', 
      { email: email }, 
      function (data) { alert(data); } 
     ); 
     $('#newsletter_email').val(''); 
    } 
    return false; 
} 

function newsReturn(e) { 
    if (e.which === 13) { 
     newsletterSignup.apply(this, arguments); 
    } 
}

另外，我不知道您的標記是什麼樣子，但如果你使用一種形式：

<form action="newsletterSignup.php" method="post" id="newsletter-form"> 
    <input type="text" id="newsletter-email" name="newsletter_email"/> 
    <button type="submit">Go-go-gadget!</button> 
</form>

那麼你可以跳過KEYUP東西：

$('#newsletter-form').submit(newsletterSignup); 

function newsletterSignup(e) { 
    e.preventDefault(); 
    var email = $.trim($('#newsletter-email').val()); 
    if (!validateEmail(email)) { 
     alert('Please enter a valid email'); 
     return false; 
    } else { 
     // add email to database 
     $.post(this.action, 
      { email: email }, 
      function (data) { alert(data); } 
     ); 
     $('#newsletter-email').val(''); 
    } 
    return false; 
}

此外，人們將能夠註冊，即使你在頁面上一個JavaScript的問題。

來源

2011-02-26 10:33:47 Bergius

函數的行爲差異 - JavaScript/jQuery

回答

相關問題