JQuery - IMG 的访问 ID 附加到 php 脚本的表中

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，然后上面的代码将使用该 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-button 的 ID 并将其传递给我的 php 脚本。我知道这是可能的，因为我之前在其他应用程序（例如 Basecamp）中见过它。那么，有人可以指导我如何实现这一目标吗？

仅供参考，我正在使用 JQuerUI 创建对话框等。

非常感谢您的帮助！

---

添加原始消息

好的，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 变量赋值的行，即：

type_id = types_id;

我无法获取类型 id。如果该行保留在那里，则必须单击添加按钮两次。我不知道为什么会发生这种情况。我确信这是我缺乏 JS 知识，所以我正在寻求帮助，因为我没有发现变量声明本身有任何问题。

再次感谢！

Answer 1

这个问题似乎与您正在做的事情非常相关： jquery Find ID of动态生成的tr标签

提到的代码看起来像这样，但我认为你可以根据你的需要重写它：

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

也许这会起作用？