dom - JQuery - Access ID of IMG appended to table for php script -

basically, i've got table displays few rows delete button next them. when clicks on delete button, take id of button, pass php script, delete record database, , fade row out page. here's code:

$(".remove-button").live('click', function(){      var remove_ptype = encodeuricomponent($(this).attr("id"));       $.ajax({       type: "post",       datatype : "html",       url: "script.php",       data: "id of remove button goes here",       success: function(msg){       //do nothing        }       });      $(this).parent().parent().fadeout(500);      }); 

ok, next step. have add button, opens dialogue, processes script, returns data , appends appends row data entered. script returns id delete button used above code. here's appending code:

$("<tr>" +          "<td>" + unescape(name) + "</td>" +           "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + name_id + "\" class=\"remove-button\" width=\"20\">"+ "</td>" +          "</tr>").appendto( "#ptypes tbody" ); 

so works beautifully far. when try delete newly added row without refreshing page, removed screen fine, unable pick id of newly appended .remove-button , pass php script. know it's possible i've seen done before in other applications (like basecamp). so, can please guide me on how can accomplish this?

fyi, i'm using jquerui create dialogue box, etc.

thanks help!

---

addition original message

ok id indeed not showing up. i've got show , works, still have issue. here code jquery:

$( "#add-type-form" ).dialog({                             autoopen: false,                             height: 350,                             width: 500,                             modal: true,                             buttons: {                                 "add": function() {                                     var type_name = encodeuricomponent($('#type_name').attr('value'));                                     var type_id = '';                                     if (type_name != "") {                                           //submit form                                         $.ajax({                                         type: "post",                                         datatype : "html",                                         url: "script.php",                                         data: "f=1" + "& ff=2" + "more stuff",                                         success: function(msg){                                         types_id = msg;                                         }                                         });                                         type_id = types_id;                                         //append display                                                                                  $("<tr>" +                                                 "<td>" + unescape(type_name) + "</td>" +                                                  "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">"+ "</td>" +                                              "</tr>").appendto( "#ptypes tbody" );                                         $( ).dialog( "close" );                                     }},                                 cancel: function() {                                     $( ).dialog( "close" );                                 }                             },                             close: function() {                                 allfields.val( "" ).removeclass( "ui-state-error" );                             }                         }); 

so jqueryui diagloue, processes script, returns id want assign img tag. trouble is, add button has pressed twice reason. if remove line assign value type_id varaible after ajax function, i.e.:

type_id = types_id; 

i can't type id. if line stays in there, add button has clicked twice. i'm not sure why that's happening. sure lack of js knowledge, i'm seeking because don't see wrong variable declaration per se.

thanks again!

this question seems pretty related you're doing: jquery find id of dynamically generated tr tag

the code mentioned looks this, think can rewrite needs:

$("a[href='delete.php']").click(function(e){    var tr = $(this).closest('tr'),        id = tr[0].id;     // put ajax call here    $.post('/delete/' + id, function(){        // animate up, remove        tr.slideup(500, function(){           tr.remove();        });    });  }); 

if you're running chrome or firefox, able see id of button in first place? isn't being appended...

good luck!

---

it looks not waiting response query, why have click button twice. i've hacked (hopefully working) version of script waits query finish before closing dialog , doing of other clockwork:

$("#add-type-form").dialog({     autoopen: false,     height: 350,     width: 500,     modal: true,     buttons: {         "add": function() {             var type_name = encodeuricomponent($('#type_name').attr('value'));             var type_id = '';             var this_old = $(this); // because $(this) won't work inside of anonymous function, have original $(this) variable.              if (type_name != "") {                 //submit form                 $.ajax({                     type: "post",                     datatype: "html",                     url: "script.php",                     data: "f=1" + "& ff=2" + "more stuff",                     success: function(msg) {                         types_id = msg; // i'm not sure if need these 2 lines, i'll keep them here anyways.                         type_id = types_id;                          //append display                                                                  $("<tr>" + "<td>" + unescape(type_name) + "</td>" + "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">" + "</td>" + "</tr>").appendto("#ptypes tbody");                         this_old.dialog("close");                     }                 });             }         },         cancel: function() {             $(this).dialog("close");         }     },     close: function() {         allfields.val("").removeclass("ui-state-error");     } }); 

maybe work?