After append() how to bind a click event to just added element

Question

I have this code

$(".delete2").click(function() {
  $('#load2').fadeIn();
}

I have dynamically added item via this return

addSubcategory = function(){
        sucategorynameval = $("#sucategoryname").val(); 
        categoryId        = $("#addcategoryid").val(); 
        $.get("process-add-subcat.php", { "action": "add_subcategory", "sucategoryname": sucategorynameval, "categoryId":categoryId },
               function(data){
                 //$("#main-cat-"+categoryId).load(location.href+"&pageExclusive=1 #main-cat-"+categoryId+">*","");
                 $("#main-cat-"+categoryId).append(data);
                 $("#addcategoryid").val(''); 
                 $("#sucategoryname").val(''); 
               }); 

The returned data contains delete2 classed item.

How do I apply the click event to the newly added item?

Answer 1

well you can just rebind it with the same click function you have used before or you use .live() http://api.jquery.com/live/

Answer 2

Replace

$(".delete2").click(function() {
    $('#load2').fadeIn();
}

with

$(".delete2").live('click', function() {
    $('#load2').fadeIn();
});

This way the click event is bound to all existing an in the future created elements with class .delete2