jQuery cannot see a dynamic element?

Question

I've a simple code as following:

<html>
<body>        
    <div id="div1">
       <input class="input1" type="text" value="click me 1" />
    </div>

    <script type="text/javascript">
       $('.input1').click( function() { alert('clicked'); });

       $('#div1').append('<input class="input1" type="text" value="click me 2" />');
    </script>
</body>
</html>

I found that the 2nd textbox, which was appended to the "#div1", didn't get the click respond which is associated to the class "input1".

what am I missing? please advise me, thank you very much.

user1106925 · Accepted Answer · 2012-01-20 15:49:55Z

2

You should use event delegation with the .on() method...

$('#div1').on('click','.input1',function(...

This places the handler on #div1. When clicks happen inside of it, the '.input1' selector is run, and if the element clicked matches, the handler is invoked.

Or in older versions of jQuery (pre 1.7), use .delegate().

$('#div1').delegate('.input1','click',function(...

answered Jan 20, 2012 at 15:49

community wiki

user1106925

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

Comments

Ahmet Kakıcı · Accepted Answer · 2012-01-20 15:49:16Z

2

jQuery Live Function : Attach an event handler for all elements which match the current selector, now and in the future.

answered Jan 20, 2012 at 15:49

Ahmet Kakıcı

6,4124 gold badges39 silver badges49 bronze badges

2 Comments

James M Over a year ago

.live() is deprecated - on should be used instead.

ShankarSangoli Over a year ago

live is depricated from 1.7+ so not adviceable to use it.

qiao · Accepted Answer · 2012-01-20 15:49:54Z

2

When you are trying to bind the click event on .input1, it's not available yet, thus the bind will fail.

To fix it, you should use on:

$('#div1').on('click', '.input1', function(){alert('clicked')})

answered Jan 20, 2012 at 15:49

qiao

18.3k7 gold badges60 silver badges46 bronze badges

1 Comment

user1106925 Over a year ago

$('.input1').on('click', function( will have the same issue that OP is having.

Kristian · Accepted Answer · 2012-01-20 15:51:49Z

0

$('.something').click() appends the click listener/callback to anything that is currently in the dom.

When you have elements that were created after dom ready, you can use $('.something').live('click', function() { ... }); to do exactly the same thing for those newly created elements.

But if you're using the newest version of jQuery, use .on(...) because live was recently deprecated.

answered Jan 20, 2012 at 15:51

Kristian

22k19 gold badges108 silver badges184 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2012-01-20 15:53:03Z

click and all of the other synonyms for bind only work for elements that exist when the function is called. If you want to also handle ones that may get created in the future, you either have to hook them up when you create them (usually a pain), or use event delegation. Event delegation works by hooking the event on a container of some kind that you're going to put the elements in, and then relies on how events bubble up the DOM from child to parent.

jQuery has excellent support for event delegation in its delegate and (more recently) on functions:

// `delegate` (jQuery 1.4.2 and later)
$("selector for container").delegate(".input1", "click", function() {
    // I'll be called when there's a click on anything matching the
    // selector ".input1" contained by the container
});

// `on` (jQuery 1.7.0 and later; note that the param order is different from `delegate`)
$("selector for container").on("click", ".input1", function() {
    // I'll be called when there's a click on anything matching the
    // selector ".input1" contained by the container
});

If the only common container the elements will have is the document itself, that's fine, you can use document as the container. (jQuery has the live function for that, but it's deprecated and it currently just calls on for you.) But in general, the more targeted you can be with the container, the better, from both a performance perspective and a code clarity perspective. For instance, use the form if you're adding form elements to a form; use the table if adding elements to a table. Etc.

dimitril · Accepted Answer · 2012-01-20 15:52:22Z

-1

Use the jQuery Live function as stated by Achmet. This is needed because the second input field is created at run-time after the dom has been loaded.

answered Jan 20, 2012 at 15:52

dimitril

3932 silver badges4 bronze badges

3 Comments

early Over a year ago

finally, I changed the function to $('.input1').live("click", function() { alert('clicked!!!'); }); and it works flawless. Thank you very much.

user1106925 Over a year ago

@early: Don't use .live(). Even before jQuery 1.7 its not a very good solution.

dimitril Over a year ago

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). My bad.

Collectives™ on Stack Overflow

jQuery cannot see a dynamic element?

6 Answers 6

Comments

2 Comments

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related