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>