jquery.load() only working once

jquery.load() only working once

Hi there,

I am a relative newbie to jquery/javascript and have what I hope is a simple problem. I am using. I have an input text field with an add/submit button - it's purpose is to add tags to an article created in a CMS.
Whenever a tag is entered
1) I am using a click listener on the submit button
2) and am calling Jquery.load() to perform some checks/validation and
4) add the tag to the database
5) then retrieve the new set of tags for that article and inject them into the DOM.

Therefore there are two click listerners in my header:

1 for the submit button:

  $('#tags_submit').click(function() {
                     var tag = document.getElementById('tags_search').value;
                     var article_id = document.getElementById('a_id').value;
                     
                     $('#tags_results').load(submit_link, {tags_search: tag, a_id: article_id});
                     document.getElementById('tags_search').value = "";
                     
                     return false;
                });


& 1 for each of the tags delete links (an anchor element)
         $('.delete_tag').click(function(ev) {
                   
                    ev.preventDefault();
                   
                    var $self= $(this);                   
                    $('#tags_results').load($self.attr('href'));
                });



Everything works fine for the first attempt at either inserting or deleting. In fact I can carry on submitting new tags and this works fine however if I then try to delete one the javascript event listeners do not register the click and the page navigates.

Each time I use the load function I am rendering a whole new list of tags and there respective delete links which I think may be causing the problem.

Here is the live example of my problem:

http://ultravioletdesign.co.uk/mdi/adas_v2/index.php/admin/tags/init_tags/207

Hope someone might have a solution for me.

Many thanks,

Gareth