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

也許這會工作？