Reload Javascript and rebind elements when using JQuery

by

I was doing a simple JQuery program. I need to add new rows and there is a delete button in each of them. The “delete” link is for deleting using Ajax. There is no problem for me to add a row using JQuery Ajax function. But the “delete” link in the newly added rows doesn’t work.

I think the problem is that the Javascript is loaded before and not reloaded, so the Javascript ignores the newly added elements. What I do is to reload the javascript again.

Here is the code for that.

add_note = function(){
		//alert("submit");
		memo = $("#memo").val();
		//alert(memo);
		$.post('back.php',
		{
			todo: "add_note",
			memo: memo,
		},function(data){
			$('#memo_list').append(data);
 
			        //Be careful here, reload the javascript code
				//reload this function to delete 
				$('.delete_link').click(function(){
					var item_id = $(this).attr("id");
					$("#note_"+item_id).fadeOut(500);
					$.post('back.php',
					{
						todo: "delete_note",
						memo_id: item_id
					},function(data){
						//after delte do nothing
					});
 
				});					
				});
			}

Do you have any other ideas?

Welcome to comment and thanks in advance!

Leave a Comment