CODEWITHSUNDEEP
javascriptjqueryhtml
Steven
Steven

Reputation: 18859

Access dynamically created items using jQuery?

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?

Upvotes: 5

Views: 15953

Answers (6)

Ethan Kawkji
Ethan Kawkji

Reputation: 227

Use the .live() function of jQuery

Upvotes: 0

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

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.

Upvotes: 0

Gromer
Gromer

Reputation: 9931

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.

Upvotes: 3

jtheman
jtheman

Reputation: 7491

Try

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

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

</script>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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!');
});

Upvotes: 10

Mark
Mark

Reputation: 5720

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/

Upvotes: 1

Related Questions