Search code examples
javascriptjqueryonblur

jQuery blur event not working

why blur event in the below code is not working and the alert box pop-ups as soon as the document is ready and not wait for blur event. give me suggestion to fix it... Thanks...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("[type=text]").blur(cc("[type=text]"));
    $("[type=email]").blur(cc("[type=email]"));
    function cc(s){
        alert("Value: " + $(s).val());
    }
});
</script>
</head>
<body>
<input type="text" id="test" value="rev"><br>
<input type="email" id="test" value="mail@example.org">
</body>
</html>

Solution

  • blur() function take function as a parameter. In your code you pas result of cc function execution.

    You should use anonymous functions:

    $(document).ready(function(){
    $("[type=text]").blur(function() { cc("[type=text]"); });
    $("[type=email]").blur(function() { cc("[type=email]"); });
    function cc(s){
        alert("Value: " + $(s).val());
    }
});