jQuery doesnt work after adding a jquery line

Question

I have few line that listing to this script

$("a.remove").click(function(){
    var id = $(this).attr('id')
    var user = $(this).attr('value')
    $.ajax({
        success : function(){
            var url = "includes/action.php?page=access&action=remove";
            var popupmessage = "Error";
            $.post(url, { id: id },
                function(data){
                    return true;
            });
        }
    });
});

but when i add new line via jQuery it doesn't work until refreshing the page

$("<a class=\"remove\" href=\"#\"></a>").insertAfter('#accesstable tr:last');

any idea how to fix it ?

Edit: Working code

$('a.remove').live('click', function(){
    var id = $(this).attr('id')
    var user = $(this).attr('value')
    $.ajax({
        success : function(){
            var url = "includes/action.php?page=access&action=remove";
            var popupmessage = "Error";
            $.post(url, { id: id },
                function(data){
                    return true;
            });
        }
    });
});

I don't know what `I have few line that listing to this script` or `add new line via jQuery` mean, soo...yeah... — Chad, Jan 08 '13 at 15:05
Your selectors look bad. Try `$('a.remove').click(function(){})` and `$('#' + rid).insertAfter('#accesstable tr:last')` instead — Geo, Jan 08 '13 at 15:06
Yeah, i know.. it's old שbandoned Code. i will optimize it, thanks — Kirma, Jan 08 '13 at 15:18
**Don't use `live`, as it has been deprecated. I suggest you look at @matt's answer: http://stackoverflow.com/questions/14217865/jquery-doesnt-work-after-adding-a-jquery-line#answer-14217901 — Ayman Safadi, Jan 08 '13 at 15:18
"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()." http://api.jquery.com/live/ — Ayman Safadi, Jan 08 '13 at 15:21

score 3 · Answer 1 · edited Jan 08 '13 at 15:19

3

Try:

$(document).on('click', 'a.remove', function(){

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

http://api.jquery.com/on/#direct-and-delegated-events

edited Jan 08 '13 at 15:19

Chad

19,219
4
50
73

answered Jan 08 '13 at 15:05

matt

2,312
5
34
57

it's doesnt work.. but when i changing the .on to .live it's working fine – Kirma Jan 08 '13 at 15:31

score 1 · Answer 2 · answered Jan 08 '13 at 15:09

At a guess (because there isn't enough code shown to be sure), your problem is that you are binding the click, and then later adding an element that is supposed to be bound by that click handler. It doesn't work that way. If you bind with .click, it will bind all the matching elements that exist at that time. It won't automatically bind new elements that are created.

To bind elements that haven't be created, use .on instead on a parent element with a selector.

b1nary · Answer 3 · 2013-01-08T15:41:54.473

0

jQuery ignores listener on content which is added dynamicly, use jQuery's live

$("a[class='remove']").live('click', function(){});

EDIT: live is deprecated, use a solution with on

edited Jan 08 '13 at 15:41

answered Jan 08 '13 at 15:07

b1nary

289
3
11

4

.live is deprecated use .on see my comment below. – matt Jan 08 '13 at 15:08
i really didnt know its deprecated... i think i use jQuery way to long without rereading. – b1nary Jan 08 '13 at 15:17
1

`.live` is deprecated in favor of delegating with `.on` please use @matt's answer instead. – Chad Jan 08 '13 at 15:19

score 0 · Accepted Answer · answered Jan 08 '13 at 15:09

If you mean that your newly added anchor tag doesn't call the same click event that you have already declared, that is because you are using the .click() function. This only adds the click event to those matching elements that are currently in the page.

You should look at using the live() event, as this will

Attach an event handler for all elements which match the current selector, now and in the future.

So you can change to something like:

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

Edit

Live() is deprecated, you should now use the on() function.

score -1 · Answer 5 · answered Jan 08 '13 at 15:35

-1

.live is deprecated just use:

$(document).on('click', 'a.remove', function(){..});

answered Jan 08 '13 at 15:35

Ahmed Kato

1,697
4
29
53

jQuery doesnt work after adding a jquery line

5 Answers5