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
– flitzwald, Commented Feb 11, 2011 at 10:58

Dogbert · Accepted Answer · 2011-02-11 10:57:22Z

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, 2011 at 10:57

Dogbert

224k43 gold badges419 silver badges416 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

I use this all the time for similar situation, it's extremely handy.

Peeter · Accepted Answer · 2011-02-11 10:59:38Z

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, 2011 at 10:59

Peeter

9,3825 gold badges39 silver badges53 bronze badges

Comments

Jonathon Bolster · Accepted Answer · 2011-02-11 10:59:30Z

0

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

answered Feb 11, 2011 at 10:59

Jonathon Bolster

16k3 gold badges45 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery .click() problem

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related