dynamically added element is not wired on jquery event

Question

on dom ready I have wired event

$('.someClass').on('input', function (e) {
   //  do something
});

on same I'm injecting html elements with where I add .someClass to include that field for same event

var cssClass = "form-control";
if (myProperty == true) {
     cssClass = "form-control someClass";
}
('#myTable tr:last').after(
   '<tr>'+
   '<td><input class=' + cssClass + ' type="text"'</td></tr>'+
   '</tr>'
);

but I'm getting rendered inside firebug as

<input class="form-control someClass" type="text"</td someClass="">

and this field is not fetched on .someClass event

Half dupe of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Tushar, Dec 15 '15 at 14:02

MoLow · Answer 1 · 2015-12-15T14:16:51.147

1

the solution is to write:

$('body').on('input','.someClass', function (e) {
   //  do something
});

and fix your code:

$('#myTable tr:last').after(
   '<tr>'+
   '<td><input class=' + cssClass + ' type="text"/></td></tr>'
);

edited Dec 15 '15 at 14:16

answered Dec 15 '15 at 13:52

MoLow

3,056
2
21
41

He is getting issue at this line of code. – Dilip Oganiya Dec 15 '15 at 13:54

score 0 · Answer 2 · answered Dec 15 '15 at 14:01

Mmm... aren't you missing the quotation mark (") in the input's class?

Furthermore, you are not correctly appending the td and tr closing tags. Try something like this:

$('#myTable tr:last').after(
    '<tr>' +
    '<td><input class="' + cssClass + '" type="text" /></td>' + 
    '</tr>'
);

dynamically added element is not wired on jquery event

2 Answers2