jQuery .click() problem

Question

I hava a simple jQuery script. I use .ajax() to get some info from my database, it works perfect.

The problem is the php-code genereate xhtml code with a-tags with different class, like .info, .delete and .edit.

I want to do stuff when i click in my .info link. I have tried this code:

$('a.info').click(function (e) {
    e.preventDefault(); 
    alert('Do stuff');
});

it dosen't work at all, nothin happens. firebug gives me no error so i dont know how to solve the problem.

    $('a').click(function (e) {
    e.preventDefault(); 
    alert('Do Stuff 2');
});

works on all links on the site but not on the link that is generated from the php code.

my code:

$(function(){       
$.ajax({
    type: "POST",
    url: 'users.php',
    data: 'getall=true',
    success: function( r ) { 
        $(' #content ').html( r );
    },
    error: function( ) {
        alert('Error');
    }
});

$('a.info').click(function (e) {
    e.preventDefault(); 
    alert('Do Stuff');
});


$('a').click(function (e) {
    e.preventDefault(); 
    alert('Do Stuff 2');
});

});

You should add the relevant snippet of generated markup - since that seems to be the root of the problem... — flitzwald, Feb 11 '11 at 10:58

score 4 · Answer 1 · answered Feb 11 '11 at 10:57

4

Use .live

$('a.info').live('click', function (e) {
    e.preventDefault(); 
    alert('Do stuff');
});


$('a').live('click', function (e) {
    e.preventDefault(); 
    alert('Do Stuff 2');
});

answered Feb 11 '11 at 10:57

Dogbert

212,659
41
396
397

I use this all the time for similar situation, it's extremely handy. – Chris Feb 11 '11 at 11:03

score 1 · Answer 2 · answered Feb 11 '11 at 10:59

1

Use $.live. $.click registers the click events on objects that are currently present. Using $.live means your click events are basically re-registered when new elements are added to the page.

answered Feb 11 '11 at 10:59

Peeter

9,282
5
36
53

score 0 · Answer 3 · answered Feb 11 '11 at 10:59

It looks like you're getting the HTML from the AJAX request. The click function will set up handlers for the objects that it knows about at the time you call - in this case, it is after the DOM is loaded but before the AJAX request is returned.

To handle the click event for any object that is added after the DOM is loaded, use the live function:

$('a.info').live('click', function (e) {
    e.preventDefault(); 
    alert('Do stuff');
});

jQuery .click() problem

3 Answers3

Linked