focus() not working for input that created by javascript

Question

I have create a html page by using javascript to create the input box, and using jquery to assign the class to the input box then trying to using focus() by using the class name, but it's not working at all. When I click on the input box, alert is not pop up :(

Does anyone know what is going wrong here ? and how can I fix this issue?

html page:

  <table border="0" width="800">
    <tr>
        <td align="center">
            <div id="test">

            </div>       
        </td>
    </tr>
  </table>

javascript:

htmlValue = "<input maxlength='4' size='2' type='text'  id='startTime_1' value='" + startTime + "'  />";

$("#test").html(htmlValue );


$('#startTime_1').addClass('test1');


$('#test1').focus(function () {
    alert('inside');
});

Where do you append the input?

Explosion Pills
– Explosion Pills

2013-03-20 01:04:30 +00:00
Commented Mar 20, 2013 at 1:04 — Explosion Pills
– Explosion Pills, Commented Mar 20, 2013 at 1:04

hjpotter92 · Accepted Answer · 2013-03-20 02:58:08Z

1

The following code:

$('.test1').focus(function () {
    alert('inside');
});

should instead be bound to #test first.

$('#test').focus('.test1', function () {
    alert('inside');
});

Since you are still using jQuery 1.4.2; you need to use .live() method for handlers.

The code shall be

$('#test').live('focus', '.test1', function () {

edited Mar 20, 2013 at 2:58

answered Mar 20, 2013 at 1:09

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jin Yong Over a year ago

error display: Error: Unable to get value of the property 'handler': object is null or undefined

hjpotter92 Over a year ago

@JinYong Which version of jQuery are you using?

Jin Yong Over a year ago

jQuery JavaScript Library v1.4.2

hjpotter92 Over a year ago

Check the edit @JinYong This will work with 1.4.2 I would recommend to upgrade though.

kinakuta · Accepted Answer · 2013-03-20 01:08:30Z

0

If you want to add handlers to dynamically created content, you'll want to either add the handler after the content has been added or, more commonly done, just use event delegation. For jQuery, this means using .on:

$('.test1').on('focus', function () {
    alert('inside');
});

Here's the documentation to learn more about using .on.

answered Mar 20, 2013 at 1:08

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

2 Comments

Jin Yong Over a year ago

i tried but error display Error: Object doesn't support property or method 'on'

kinakuta Over a year ago

If you're using an old version of jQuery, then use .live instead of .on

Collectives™ on Stack Overflow

focus() not working for input that created by javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related