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.

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Dec 06 '13 at 08:46

score 9 · Accepted Answer · answered Dec 06 '13 at 08:48

$(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.

score 2 · Answer 2 · answered Dec 06 '13 at 08:46

2

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

answered Dec 06 '13 at 08:46

rybo111

12,240
4
61
70

score 0 · Answer 3 · answered Dec 06 '13 at 09:26

0

Try this:

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

answered Dec 06 '13 at 09:26

Mr.G

3,413
2
16
20

score 0 · Answer 4 · edited Dec 01 '20 at 06:48

0

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

edited Dec 01 '20 at 06:48

Yves Kipondo

5,289
1
18
31

answered Dec 01 '20 at 05:09

Priya Achuthan

1
1

score -1 · Answer 5 · edited Sep 18 '17 at 03:51

-1

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)

edited Sep 18 '17 at 03:51

Ravi

30,829
42
119
173

answered Dec 06 '13 at 08:46

Samuel

2,106
1
17
27

focusout event not working for dynamically generated textbox

5 Answers5