Removing loaded jQuery AJAX element

Question

I was working on a dialog with content loaded by AJAX, but I'm not able to remove it. A must was to have a multiple, php-supported, drag-able and close-able dialog.
(.center() function present)

$('a.event').click(function() {
    var url = this.href;
    var getrel = $(this).attr('rel');
    var getid = $(this).attr('id');
    var dialog = $('<div id="event_'+getid+'" class="izModal '+getrel+'"></div>').appendTo('body');
    dialog.load( url, {}, function (responseText, textStatus, XMLHttpRequest) { $('#event_'+getid+'').append("<a class='close' rel='"+getid+"'>x</a>"); } ).center().draggable();
    return false;
});

And to close it:

        $('a.close').click(function(event){
            var getevent = $(this).attr('rel');
            $('#event_'+getevent+'').hide();
        });

I've tried (as you may see) to give every dialog an id to close it. Also tried with this.parent , hide() , change the CSS and remove().

Can somebody spot the error? Thanks in advance.

Answer 1

You're creating the links dynamically do you need something like a .live() approach, like this:

$('a.close').live('click', function(event){
  var getevent = $(this).attr('rel');
  $('#event_'+getevent+'').hide();
});

When using $('a.close').click() you're finding the elements that exist when it's run, new elements that are created later won't have a click handler, .live() resolves this by relying on event bubbling...so it works on elements created later.