jquery focusout on a textbox in partial view asp.net mvc

Question

Want to fire alert when somebody leaves the textbox that is in a partial view in a asp.net mvc 4 application. Wont work for me. no error just not working. my code Jquery

$("#username").on('focusout', 'input', function () {
    alert("Lost Focus");
});

Html in the partial View

<div class="form-group">
    <label class="col-sm-6 control-label forms">UserName</label>
    <div class="col-sm-3 input-container">
        <input type="text" name="Username" id="username"/>
    </div>
</div>

Answer 1

The problem with your code is that you are trying to attach the event handler to an element that does not exist. (You filter your #username element's descendants with the input selector, so basically what you are saying to jquery is "bind the focusout handler to the descendants of #username that match the input selector". See documentation for more info.)

This will work:

$("#username").on('focusout', function () {
   alert("Lost Focus");
});

Answer 2

Try

$(document).ready(function(){
    $('#username').focusout(function(){
        alert('lost focus!');
    });
});

https://jsfiddle.net/fc4mpo1w/6/