Javascript doesn't affect html code added with javascript

Question

Hi, I'm using jquery and uploadify to upload photos to server. After uploading photos they are added to a div container using ajax. Everything works great except DELETE button. All delete buttons work on page load but those added via ajax don't work. I suppose that's because I defined function that enables image deletion and didn't use 'classic' way of deleting (form deletion):

// Delete photo     
    $(".blog_slike .delete_slika").click(function() {
     var commentContainer = $(this).parent().parent();
     var id = $(this).attr("id");
     var string = 'id='+ id ;

     $.ajax({
        type: "POST",
        url: "./include/ajax-edit/delete.php?polje=blog_slika",
        data: string,
        cache: false,
        success: function(){
      commentContainer.fadeOut("slow");
      $('#load').fadeOut();
        }    
     });

     return false;
    });

Any idea how to make button work after it's added to html code using append() function?

One more thing... to add photos to tinymce editor I use this function:

<a href=\"javascript:;\" onmousedown=\"tinyMCE.execCommand('mceInsertContent',false,'$slike_u_sadrzaj');\">Ubaci sve slike u blog</a>

...which was also added on page load. How can I add content to place where is $slike_u_sadrzaj located and how to delete it?

Thanks, Ile

Answer 1

You need the jquery live method.

Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

jQuery documentation

Sample code:

  $(".blog_slike .delete_slika").live('click',function() {