Focus/blur event not getting triggered

Question

I am trying to bind a "focus" event to a textbox, such that everytime the focus comes to it, it should call a function. However, it is not triggering the focus event. When I bring my cursor inside the textbox, nothing happens. Other event which is bind on "click" event is triggered whenever the button is clicked.

Below is the code snippet:

P.when('A',  'ready').register('dom-updater', function(A) {
var $ = A.$;
var render = function () {
    if (state.widgetType === "maker") {
        $('#saveData').bind('click', function(event) {
            saveInfoData();
        });
        $('#verifyBtn').bind('click', function(event) {
            validateData();
        });

   //This line does not work
    $( "#textBoxId" ).focus(function() {
        console.log( "Handler for .focus() called." );
    });
} else {
   //Do something else
}
};

A.on.ready(function() {
    render();
});
}

I have tried using 'blur' and also 'focus', but it is not working.

$('#textBoxId').bind('blur', function(event) {
      console.log("IN blur call");
 });

Why is the textbox not getting attached to the focus event?

Answer 1

$('body').on('focus', '#textBoxId', function() {
  //code
  console.log("IN focus call");
});
$('body').on('blur', '#textBoxId', function() {
  //code
  console.log("IN blur call");
});

this will work