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

也许这会起作用？

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

1 个答案: