focusout event not working for dynamically generated textbox

Question

//<![CDATA[ 
$(window).load(function() {

    $('.n_val').focusout(function() {
        alert(this.id);

    });

});//]]>

To generate textbox dynamically

buffer += "<tr><td>" + nomen_list.getName() + "</td><td><input type='text' style='width:50px' class='n_val' id=" + nomen_list.getId() + "-" + nomen_list.getCat() + " value=" + nomen_list.getVal() + " /></td></tr>";

I getting dynamically textbox, but focusout is not working for dynamically generated textbox, whereas same page has some textbox, which is hard-coded for that, above script gets triggered.

Answer 1

$(window).load(function() {
    $(document).on('focusout','.n_val',function() {
        alert(this.id);
    });
});

Instead of using document you could use the text box's closest parent id or class. I have no idea of your html layout, hence using document. Also see jQuery on.

Answer 2

Try this:

$(document).ready(function() {
    $(document).on('focusout','.n_val', function() {
      alert(this.id);
    });
});

Answer 3

$(document).on("focusout", ".n_val", function(){
  alert("hi");
});

Answer 4

You should call focusout AFTER every textbox is added to the DOM. Here you are probably calling it too soon (at load event, which probably occurs before you add the dynamic textboxes)

Answer 5

$(document).on('focusout', '#randmSubstationTable tbody tr td', function () {
    $('#randmSubstationTable tbody tr td')
        .focusout(function(){
            $(this).parent().parent().children().index($(this).parent());
        });
});