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() {......}

welcome to jquery. If you like more information on clicks, [click this link to similar question here](http://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-and-trigger-functions-wit). And please note that with latest jquery version (1.7), all event binding methods have been fused into one method to rule them all: `.on()` — roselan, Nov 15 '11 at 19:55

amurra · Accepted Answer · 2013-06-10T20:48:23.760

7

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(){ ... });

edited Jun 10 '13 at 20:48

answered Nov 15 '11 at 19:49

amurra

15,221
4
70
87

score 1 · Answer 2 · answered Nov 15 '11 at 19:48

1

Try with $.live o $.delegate.

answered Nov 15 '11 at 19:48

Galled

4,146
2
28
41

Tessmore · Answer 3 · 2011-11-15T19:56:38.280

1

Use:

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

edited Nov 15 '11 at 19:56

answered Nov 15 '11 at 19:51

Tessmore

1,054
1
9
23

score 0 · Answer 4 · answered Nov 15 '11 at 19:53

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"));

score 0 · Answer 5 · answered Nov 15 '11 at 19:54

0

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

answered Nov 15 '11 at 19:54

arb

7,753
7
31
66

jquery button not respond to click method

5 Answers5

Linked