jquery button not respond to click method

Question

so i am dynamically rendering a paragraph with jquery using the append method and i want to add a click event to it but for some reason the click event is not working, i know the solution is probably simple but I am new to jquery and would appreciate any help...I know the code inside the function works because i tested it with a static button, it is just not working with the dynamic one..Thanks in advance for any help,

here is my code

$(this).parent().parent().children("div").append("<p class='tryAgain'>Try Again</p>");

the click function code,

$(".tryAgain").click(function() {......}

Answer 1

Anything you add to the DOM after the document.ready has fired needs to use .live or .delegate in order to add an event handler to the newly added element.

For instance:

$('.tryAgain').live("click", function() {...});

If you are using jquery 1.7+ you should use .on:

$(document).on("click", ".tryAgain", function(){ ... });

Answer 2

Try with $.live o $.delegate.

Answer 3

Use:

$('.tryAgain').live('click', function()
{
  ....
});

Answer 4

There is an alternative to use live events, you can add the handler when you create the element like this:

$("<p>Try Again</p>", {
  "class": "tryAgain",
  click: function(){
     //YOUR CLICK HANDLER
  }
}).appendTo($(this).parent().parent().children("div"));

Answer 5

I think you can attach a click event right there when you create the new p tag like this:

$(this).parent().parent().children("div").append(
    $('<p>').addClass('tryAgain').click(function(){
        alert('test');
    }));