jquery cannot find dynamically created element in c#

Question

I am creating an input box and trying to add an event keydown to that input. If I create the input staticly, I can find it with jquery. However, if I create it in code behind, I cannot find it by jquery.

here is the c# code where I create my input dynamically

result0 += "<div style='float:left;width:130px'>Telephone: </div><div style='float:left;width:200px'><input id='txt_basic_telno" + i + "' class='blue_input' type='text' value='" + dr["MobilePhone"].ToString() + "' style='width:250px' maxlength='11' /></div><div style='clear:both'></div>";

and here is my jquery code which is supposed to trigger when user press a key during the focus is on the input box

$("#txt_basic_telno").keydown(function (event) {
        alert('test');
});

How can I fix this?

is your id 'txt_basic_telno" + i + "' or just 'txt_basic_telno' ? — redmoon7777, Mar 20 '13 at 15:40

score 1 · Answer 1 · answered Mar 20 '13 at 15:41

1

Try this

$(document).on('keydown',"#txt_basic_telno",function (event) {
        alert('test');
});

Read http://api.jquery.com/on

answered Mar 20 '13 at 15:41

Rohan Kumar

40,431
11
76
106

1

the first one's just plain wrong, your thinking of live which is depricated – Liam Mar 20 '13 at 15:42

Liam · Accepted Answer · 2013-03-21T14:56:58.587

1

You need to use on

$(document).on('keydown',"[id^=txt_basic_telno]", function (event) {
        alert('test');
});

Try not to attach this to document though as it's inefficent. replace document with the nearest static container.

Here's a fiddle to demonstrate

EDIT

Stolen selector from dystroy.......his answers better but I wanted to keep the document comment as it's important

edited Mar 21 '13 at 14:56

answered Mar 20 '13 at 15:41

Liam

27,717
28
128
190

1

From the example I would guess that the id is dynamic (the `+ i +` in the code) so this won't work – Andreas Mar 20 '13 at 15:42
@Andreas, yes, didn't notice this, think dystroy's beat me too it! – Liam Mar 20 '13 at 15:45

Denys Séguret · Answer 3 · 2013-03-20T16:12:30.327

1

If your id isn't exactly txt_basic_telno but just starts with txt_basic_telno, as seems to indicate your code, then you might use this :

$(document.body).on('keydown', '[id^=txt_basic_telno]', function(e) {
     alert('click!');
});

edited Mar 20 '13 at 16:12

answered Mar 20 '13 at 15:42

Denys Séguret

372,613
87
782
758

score 1 · Answer 4 · answered Mar 20 '13 at 16:23

1

you are using two different ids : 'txt_basic_telno" + i + "' and just 'txt_basic_telno'

answered Mar 20 '13 at 16:23

redmoon7777

4,498
1
24
26

score -1 · Answer 5 · answered Mar 20 '13 at 15:41

-1

jQuery binds the event handler to any existing objects that match the selector when the jQuery function is called, so if you want it to apply to the dynamically-created content you'll need to call the jQuery .keydown function each time after the new elements are created.

answered Mar 20 '13 at 15:41

3nafish

256
2
16

@Liam I'm pretty sure this holds true for those functions as well. According to the jQuery documentation for .on() "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()" (http://api.jquery.com/on/). Why the down-vote? – 3nafish Mar 21 '13 at 14:37
you sure? Because that's wrong! The event handler is bound to the element in the $ selector, which should be a static element, you then include a filter to the element you want to attach the event to, this does not need to exist when the on is bound. So your statement above is false, on, etc. were developed so you do not need to attach events every time you change dynamic content. – Liam Mar 21 '13 at 14:48
@Liam Yes, but it would also work with `click` instead of `on(click)`. In your fiddle, the `` tags are being dynamically created, but you're binding the event to the `
`. If you were instead binding the event to the element that was being dynamically created, you would need to call the jQuery each time after the element was created to bind it to the new elements regardless of whether you were using `on(click…)` or just `click(…)`. (I've updated your jsfiddle to show how just `click` can work.) See also http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click
– 3nafish Mar 21 '13 at 15:10
But why would you do that? on was created for this purpose! if my parent element was being recreated I'd just attach to the document, http://jsfiddle.net/qYZB2/1/. It's cleaner and more efficient this way. If you re-binding your element everytime you change something and, for example, your using lots of dynamic elements your code will very quickly become unreadable – Liam Mar 21 '13 at 15:18
1

Wow! I'd never even thought of binding directly to the document. Thank you so much for the suggestion @Liam. :) – 3nafish Mar 21 '13 at 15:29

jquery cannot find dynamically created element in c#

5 Answers5