Accessing AJAXed elements via jQuery and changing their parent

Question

Im trying to get ajaxed content to alter their parent. How can I do this with jQuery, I can't seem to get the syntax right.

    <div id="menu">
    <a href="#" id="show_names">Show Names</a>
</div>

<!-- AJAXED CONTENT -->
<div id="content">
    <a href="#" id="person">Janice</a>
    <a href="#" id="person">Steve</a>
</div>
<!-- AJAXED CONTENT (END) -->

When 'Show Names' is clicked it shows the names 'Janice' and 'Steve'. What I want to do is be able to click either of the two and have them change their parent's contect. I.e.

$("#content).empty().text('Janice was born on 3rd September');

How is this possible with jQuery? I've tried Livequery but it doesn't seem to be what I wanted.

Answer 1

$("#content a").click(function() {
  $("#content").html($(this).html() + ' was born on 3rd September');
});

I think that might be what you want.

EDIT: I just stumbled across the live function which works for future objects that might have been AJAXed in.

Answer 2

what's your click handler look like? I know that sometimes you have to use $.bind instead of $.click when working with injected content. Also, the ID's of your anchors are both the same. Try using a class or name instead.

So you could do something like this:

$("#menu").click(function() { $("#content").show();});
$(".person").click(function() { $(this).parent("div").html('janice was born...');});

if that doesn't work try replacing .click() with .bind("click", function()...)