EDIT: The problem is not related to Boxy, I've run into the same issue when I've used JQuery 's load method.

EDIT 2: When I take out link.remove() from inside the ajax callback and place it before ajax load, the problem is no more. Are there restrictions for manipulating elements inside an ajax callback function.

I am using JQuery with Boxy plugin.

When the 'Flag' link on the page is clicked, a Boxy modal pops-up and loads a form via ajax. When the user submits the form, the link (<a> tag) is removed and a new one is created from the ajax response. This mechanism works for, well, 3 times! After the 3rd, the callback function just does not remove/replace/append (tested several variations of manipulation) the element.

The only hint I have is that after the 3rd call, the parent of the link becomes non-selectable. However I can't make anything of this.

Sorry if this is a very trivial issue, I have no experience in client-side programming.

The relevant html is below:

<div class="flag-link">
    <img class="flag-img" style="width: 16px; visibility: hidden;" src="/static/images/flag.png" alt=""/>
    <a class="unflagged" href="/i/flag/showform/9/1/?next=/users/1/ozgurisil">Flag</a>
</div>

Here is the relevant js code:

$(document).ready(function() {

    $('div.flag-link a.unflagged').live('click', function(e){   
        doFlag(e);
        return false;
    }); 
...

});


function doFlag(e) {
   var link = $(e.target);
   var url = link.attr('href');

   Boxy.load(url, {title:'Inappropriate Content', unloadOnHide:true, cache:false, behaviours: function(r) {
	$("#flag-form").live("submit", function(){

		var post_url = $("#flag-form").attr('action');
		boxy = Boxy.get(this);
		boxy.hideAndUnload();
		$.post(post_url, $("#flag-form").serialize(), function(data){

			par = link.parent();				
			par.append(data);
			alert (par.attr('class')); //BECOMES UNDEFINED AT THE 3RD CALL!!
			par.children('img.flag-img').css('visibility', 'visible');
			link.remove();												
		});

		return false;
		});	
	}});

}