how to use ajax link in a ajax return HTML unobtrusively

Question

I have a page, with ajax URL on it, ofcourse this page is applying unobtrusive javascript, let's call this page A.

<div id="pageA">
    <a href="additem?id=1>Add this item</a>
</div>
<div id="items"></div>

when i click that URL page B return a div with a URL that suppose to be ajax link. the return something like this:

<div class="item">This is 1 item <a href="delete?id=3">Delete this</a><div>

so the page final will look like this:

<div id="pageA">
    <a href="additem?id=1>Add this item</a>
</div>
<div id="items">
    <div class="item">This is 1 item <a href="delete?id=3">Delete this</a><div>
</div>

the delete link tag from returned HTML suppose to run just like the additem link. but i dont know how to make this work.

is there any way to keep this unobtrusive?

thank you very much :)

PS: IM using jquery

Answer 1

http://plugins.jquery.com/project/livequery/

for the sake of simplification, we can just use this. one call

$('.item-control').livequery('click', function(event) {
    var addlink = $(this);
    $('#form').ajaxSubmit({ url: addlink.attr('href'), success: function(d) { $("#parrentDIV").empty().append(d); } });
    return false;
});