2

我在一个小项目中使用 Bootstrap 以及它附带的 jQuery 插件。现在我弹出一个模式对话框来确认删除，当用户单击确认按钮时，它会很好地删除记录。

但是，我还想做的是让具有单击按钮的表格行也被删除。因此，如果用户单击 tr 第 5 行上的“删除”按钮，当用户确认时，它也会从表中删除 tr 第 5 行。

该表是动态生成的，但这里有一个小例子：

<table class="table table-hover table-condensed" style="table-layout: fixed;" id="api_key_list">
<tbody>
<tr id="key_0"><td>test</td>
<td>eqeI0Tt-V7rzijDfLqrna2</td>
<td>eqeI0Tt-V7rzijDfLqrn</td>
<td>
<input type="hidden" id="api_server_31" value="test" />
<input type="hidden" id="api_server_31_sid" value="null" />
<input type="hidden" id="api_server_31_tid" value="0" />
<button type="submit" class="api_key_edit btn btn-small btn-primary" value="31">Edit</button>
<button type="submit" class="api_key_delete btn btn-small btn-danger" value="31">Delete</button>
</td>
</tr>
</tbody>
</table>

我的对话框也是动态生成的，但在此示例中显示的内容如下：

<div id="api_key_delete" class="modal hide fade in" role="dialog" style="display: block;" aria-hidden="false"><div class="modal-header"><button class="close" aria="hidden="true"" data-dismiss="modal" type="button"> … </button><h3 id="label">
      Delete API Key for 
    <span id="api_key_delete_server">
      test
    </span>
      ?
    </h3></div><div class="modal-body"> … </div><div class="modal-footer"> … </div></div>

我的 JS 代码是这样的：

$("#conf_delete").click(function(e){
    e.preventDefault();

    if($(this).hasClass("disabled")){
        return false;
    }

    var conf = $("#conf_delete").val();
    conf = conf.split("|");

    var server = conf[0];
    var kid = conf[1];
    var tid = conf[2].substring(4);

    $.post("/api",
        {server : server, id : kid, api_act : "deletek"},
        function(data){
            var n = data.split("|");
            var type = n[0];
            var msg = n[1];
            var dak = $("#delete_api_key_msgbox");

            dak.show();

            if(type == "e"){
                dak.addClass("alert-error");
            } else{
                dak.addClass("alert-success");

                $("#conf_delete").addClass("disabled");

                $("#api_key_delete").modal("hide");
                // issue is here, though tr is captured, the fadeout/remove doesn't work
                var tr = $("#api_server_"+server).closest("tr");
                console.log("tr:"+tr);
                tr.fadeOut(400, function(){
                    tr.remove();
                });
            }

            $("#dak_msg").html(msg);
        }
    );
});

发生的情况是对话框弹出，用户单击确认并且对话框显示消息，但无论我将淡出/删除代码放在哪里，它似乎都没有对背景做任何事情。

4

1 回答 1

1

我使用了错误的变量。这是相当尴尬的。

于 2013-07-12T16:45:46.973 回答