0

基本上，我有一个表格显示几行，旁边有一个删除按钮。当有人单击删除按钮时，我获取该按钮的 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 知识，所以我正在寻求帮助，因为我看不出变量声明本身有什么问题。

再次感谢！

4

1 回答 1

0

这个问题似乎与您正在做的事情非常相关：jquery Find ID of dynamicly 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");
    }
});

也许这会起作用？

于 2010-12-02T17:35:35.070 回答