Hiding an AJAX DIV tag... problems

I have the following开发者_开发知识库 jQuery code:

$('a[rel=close]').click(function() {
        alert('Close click!');
        $('div#purchasePanel').hide();
    });

This is used with:

<div id="purchasePanel">
<a href="#close" rel="close"><li> Close </li></a>
</div>

The alert() never gets called.

The DIV contents is shown and displayed using AJAX, which works fine. It's just this pesky close button that refuses to...

---

Most likely you are adding the link after registering the handler.

The solution is using a live event:

$('a[rel=close]').live('click', function(e) {
    e.preventDefault();
    alert('Close click!');
    $('div#purchasePanel').hide();
});

---

If the DIV is generated using AJAX you should live instead of click.

---

If your script tag is before the link the handler is probably not getting attached. Try this:

<script>
// wait until everything has loaded
$(document).ready(function(){
    $('a[rel=close]').click(function(e){
            e.preventDefault(); // needed to stop from loading the link
            alert('Close click!');
           $('#purchasePanel').hide();
    });
});
</script>