jQuery click event, after appending content

67,489

Solution 1

Because the elements that you are appending do not exist when you define the the click handler, they are created dynamically. To fix this you can use the delegate() method from jQuery.

$('ul').delegate('a','click',function() {
    // your code here ...
});

Online example: http://jsfiddle.net/J5QJ9/

Solution 2

$(document).on('click','ul li a', function(){
      // Content Code
});

Solution 3

From jQuery 1.7 you can use the .on() handler to bind the newly created element ot the 'click' event:

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>').on('click', 'ul li a', function () {
            alert('thank you for clicking');
        });
    });
</script>

(this is with the original example).

Solution 4

.live is deprecated as of 1.7. Try this (jquery 2.1.4):

Html:

<a id="load_list" href="#">Load the list</a>

<ul></ul>

JQuery:

$(document).ready(function() {

 $('#load_list').click(function() {
   $('ul').html("");    

   $("<li/>", {
        "class" : "someClass",
        text: "Click here",
        click: function() {
          alert($(this).text());
        }
      }).appendTo('ul');
  });
});

or something like this (but I didn't find how to attach click to the anchor):

$(document).ready(function() {
 $('#load_list').click(function() {
   $('ul').html("");

   $('<li><a href="#">Click here</a></li>').on({
      click: function() {
        alert("hoi");
      }
    }).appendTo("ul");
 });
});
Share:
67,489

Related videos on Youtube

Pav
Author by

Pav

Developer

Updated on April 26, 2020

Comments

  • Pav
    Pav over 3 years

    Wondering why the example below doesn't work?

    <a id="load_list" href="#">Load the list</a>
    
    <ul></ul>
    
    <script type="text/javascript">
    $(document).ready(function() {
        $('#load_list').click(function() {
            $('ul').append('<li><a href="#">Click here</a></li>');
            return false;
        });
        $('ul li a').click(function() {
            alert('Thank you for clicking');
            return false;
        });
    });
    </script>
    
    • alexyorke
      alexyorke over 12 years
      -1. My question was incorrectly downvoted because some of the information provided was incorrect, appearing as though my answer was completely incorrect.
    • Pav
      Pav over 12 years
      Doesn't take a genius to figure out I've only posted part of the code that wasn't working. Thanks for your input tho.
  • amosrivera
    amosrivera over 12 years
    As Bless Yahu says, it is better to use delegate, see nettuts explanation on that: net.tutsplus.com/tutorials/javascript-ajax/…
  • Craig White
    Craig White over 12 years
    Thanks for the downvote whoever you are. :/ I gave proper new code with comments.
  • M Lamb
    M Lamb over 11 years
    A bit of further information (My apologies for dodgy formatting): Old: $("#Item1").click(function(e) { New: $(document).delegate("#Item1", "click", function(e) { Even Newer: $(document).on("click", "#Item", function(e) {
  • M Lamb
    M Lamb over 11 years
    Probably because this has to be the most painful way possible.
  • brixenDK
    brixenDK about 9 years
    .live has been removed as of jQuery version 1.9, so .delegate or .on is the way to go.
  • Imnotapotato
    Imnotapotato over 6 years
    .on didn't work for me although i have jQuery 1.11
  • Achraf Farouky
    Achraf Farouky about 2 years
    Thank you for your help :)