Access dynamically created items using jQuery?

Question

I have a page where some html is being dynamically added to the page.

This is the html and javascript that is created:

<div>
    <script type="text/javascript" language="javascript">
        $('#btn').click(function() {
            alert("Hello");
        });
    </script>

    <a id="btn">Button</a>
</div>

Looking in my Firebug console, I get an error that says:

TypeError: $("#btn") is null

jQuery is being loaded on the page initially.

What am I doing wrong here?

Your code should not result in that *TypeError* even if the DOM is not ready. Are you also using `prototypejs`? — gray state is coming, Sep 07 '12 at 21:26
`TypeError: $("#btn") is null` is not because of dynamic elements.. Tell us what you mean by dynamic elements — Selvakumar Arumugam, Sep 07 '12 at 21:27

score 9 · Accepted Answer · answered Sep 07 '12 at 21:24

9

You have to bind on() (or the events defined within the on() method, to an element that exists in the DOM at the point at which the jQuery was run. Usually this is on $(document).ready() or similar.

Bind to the closest element in which the $('#btn') element will be appended that exists in the DOM on page-load/DOM ready.

Assuming that you're loading the $('#btn') into the #container div (for example), to give:

<div id="container">
    <div>
        <a href="#" id="btn">Button text</a>
    </div>
</div>

Then use:

$('#container').on('click', '#btn', function(){
    alert('Button clicked!');
});

answered Sep 07 '12 at 21:24

David says reinstate Monica

230,743
47
350
385

2

I don't think that is an issue here.. `TypeError: $("#btn") is null` is not something thrown on dynamic elements. – Selvakumar Arumugam Sep 07 '12 at 21:28
@Vega: I hadn't taken proper notice of that error. Hmm. Presumably instead, then, the element is not being selected properly in the first place? – David says reinstate Monica Sep 07 '12 at 21:30

score 3 · Answer 2 · edited May 23 '17 at 12:01

3

Use .on to wire up the event to your button. Check this SO answer:

Event binding on dynamically created elements?

$(document).ready(function() {
    $('body').on('click', '#btn', function() {
        alert("Hello");
    });
})

Edit: I added the document ready code, you'll want to make sure you do that.

Fixed.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 07 '12 at 21:25

Gromer

9,305
4
32
54

1

That syntax wouldn't bind to dynamically added nodes – Selvakumar Arumugam Sep 07 '12 at 21:26

score 1 · Answer 3 · answered Sep 07 '12 at 21:24

1

you are looking for .on here which will bind the click event to dynamically added nodes.

$("#parent_container").on("click", "#btn", function () {
    alert("hello")
})

the docs: http://api.jquery.com/on/

answered Sep 07 '12 at 21:24

Mark

5,490
2
23
25

2

That syntax wouldn't bind to dynamically added nodes – Selvakumar Arumugam Sep 07 '12 at 21:26
Ah yes, you are correct. Been looking at backbonejs for too long, got them mixed up. – Mark Sep 07 '12 at 21:26

score 0 · Answer 4 · answered Sep 07 '12 at 21:24

0

Try

<div>
     <a id="btn">Button</a>
</div>
 <script>

    $('#btn').on('click', function() {
        alert("Hello");
    });

</script>

answered Sep 07 '12 at 21:24

jtheman

7,211
3
24
38

` – Roko C. Buljan Sep 07 '12 at 21:25
This won't help with dynamic elements. – Gromer Sep 07 '12 at 21:26

score 0 · Answer 5 · answered Sep 07 '12 at 21:25

The problem in your code is that you are attaching the event to the button before the button is being created.

Correct version is:

  <div>
       <a id="btn">Button</a>
       <script type="text/javascript" language="javascript">
           $('#btn').click(function() {
              alert("Hello");
           });
       </script>            
  </div>

This should do the job.

score 0 · Answer 6 · edited Sep 08 '12 at 01:15

0

Use the .live() function of jQuery

edited Sep 08 '12 at 01:15

Mike Mackintosh

13,156
6
54
83

answered Sep 08 '12 at 01:06

Ethan Kawkji

207
2
9

As a note about .live() from the jQuery docs: "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()." – Gromer Sep 14 '12 at 15:14

Access dynamically created items using jQuery?

6 Answers6

Linked