JQuery - 为php脚本附加表格IMG的访问ID

Question

基本上，我有一个表格显示几行，旁边有一个删除按钮。当有人点击删除按钮时，我将该按钮的ID，传递给一个php脚本，从数据库中删除记录，然后淡出该页面的行。这里是代码：

$(".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); 
    }); 

好的，下一步。还有一个添加按钮，它打开一个对话框，然后处理脚本，返回一些数据并附加另一行输入的数据。这个脚本还返回一个id，用于删除按钮，然后上面的代码将使用它。下面是附加代码：

$("<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"); 

所以这个工作到目前为止非常漂亮。现在，当我尝试删除这个新添加的行而不刷新页面时，它确实从屏幕上移除了，但我无法拿起这个新添加的.remove按钮的ID并将其传递给我的PHP脚本。我知道这是可能的，因为我之前在其他应用程序中看到过它（如basecamp）。所以，任何人都可以请指导我如何才能做到这一点？

通知你，我用JQuerUI创建对话框等

非常感谢您的帮助！

---

除了原始消息

OK所以ID确实没有显示出来。我已经明白了它的作用，但我仍然有一个问题。这里是我的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 to 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).dialog("close"); 
            }}, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          }, 
          close: function() { 
           allFields.val("").removeClass("ui-state-error"); 
          } 
         }); 

所以这是一个jQueryUI的diagloue，基本上处理脚本，返回我要分配给我的img标签的ID。麻烦的是，出于某种原因，添加按钮必须按两次。如果我删除，我的AJAX功能后的值赋给我的TYPE_ID varaible线，即：

type_id = types_id; 

我不能得到的类型ID。如果线路停留在那里，则添加按钮必须点击两次。我不确定为什么会发生这种情况。我相信这是我缺乏JS知识，所以我在寻求帮助，因为我没有发现变量声明本身有什么问题。

再次感谢！

Answer 1

这个问题似乎很相关，你在做什么：jquery Find ID of dynamically generated tr tag

的代码中提到这个样子的，但我认为你可以将它改写为你的需求：

$("a[href='delete.php']").click(function(e){ 
    var tr = $(this).closest('tr'), 
     id = tr[0].id; 

    // Put your AJAX call here 
    $.post('/delete/' + id, function(){ 
     // Animate up, then remove 
     tr.slideUp(500, function(){ 
      tr.remove(); 
     }); 
    }); 

}); 

如果你运行Chrome或Firefox，你甚至能够首先看到按钮的id？这可能是它甚至没有被追加......

祝你好运！

---

看起来好像您并未等待对您的查询的响应，这可能是您必须单击按钮两次的原因。我砍死在一起脚本的（希望工作）的版本，等待查询到关闭对话框，并尽一切其他发条之前完成：

$("#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 really work inside of a anonymous function, you have to back up the original $(this) to another 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 exactly sure if you need these two lines, but I'll keep them here anyways. 
         type_id = types_id; 

         //Append to 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"); 
    } 
}); 

也许这会工作？