隱藏錯誤信息上點擊

我有電子郵件和密碼，一個簡單的登錄表單我有這樣的代碼來驗證電子郵件隱藏錯誤信息上點擊

$(document).ready(function() { 

$('#login-submit').click(function() { 

    $(".error").hide(); 
    var hasError = false; 
    var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; 

    var emailaddressVal = $(".email").val(); 
    if(emailaddressVal == '') { 
     $(".email").after('<span class="error">Please enter your email address.</span>'); 
     hasError = true; 
    } 

    else if(!emailReg.test(emailaddressVal)) { 
     $(".email").after('<span class="error">Enter a valid email address.</span>'); 
     hasError = true; 
    } 

    if(hasError == true) { return false; } 

    }); 
});

跨度與類.error的（按照設計我已經得到）隱藏輸入元素。

我想再次隱藏錯誤消息，當我點擊它

$(document).ready(function() { 
$('.error').click(function() { 
    $(".error").remove(); 
}); 

});

但什麼都不做。任何人都知道我在這裏做錯了什麼？

來源

2013-03-09 Stuart Robson

問題

目前，您在click處理程序綁定到頁面加載存在任何.error元素。但是您的.error消息在頁面加載後動態添加到DOM ，因此您的click處理程序未綁定到它們。

解決方案

而不是直接結合事件處理程序的元素，你應該委託事件處理程序越往上DOM到頁面加載存在父元素。

例如：

$(document).ready(function() { $(document).on('click','.error', function() { $(this).remove(); }); });

這將有click處理器適用於包含在DOM，當前和未來的任何.error元素。您當然可以限制授權範圍，例如將其附加到$('#some-form')而不是$(document)。

來源

2013-03-09 23:04:20 Boaz

我該如何解決這個問題？ jQuery不是我真正的技能。任何指向如何排序的指針？鏈接到教程或類似的？（謝謝） – 2013-03-09 23:05:47

感謝@Boaz，這個作品完美。謝謝您更新答案以包含解釋。你搖滾！ – 2013-03-10 07:28:52

您可能想要嘗試引導警報消息。它們非常易於使用，並且可以簡單地在頁面中工作，因爲它們都有自己的關閉按鈕。你可以像對待任何其他DOM元素那樣對待它們，但是沒有麻煩。你所要做的就是安裝他們的庫並使用他們的classes/javascript來獲得你想要的。它需要一些習慣，但它是一個令人難以置信的強大的補充。

http://twitter.github.com/bootstrap/components.html#alerts

來源

2013-03-10 00:17:37

感謝伊恩，不幸的是我與其他已經創建了大部分HTML/CSS的人合作編碼，因此這不是一種選擇。感謝您的鏈接。現在書籤和看看 – 2013-03-10 07:28:20

隱藏錯誤信息上點擊

回答

相關問題