Question

我已经为后端创建了一个带有signalR的ASP.NET MVC5应用程序，并使用javascript作为前端（主要用于学习）。从功能上讲，它非常简单，只允许任何连接的客户端查看项目列表，每个客户端都可以添加/删除项目。对列表的任何更改都将在所有客户端上异步更新。

我已经开始工作了，所以我可以添加动态创建表中新行的项目，每次添加都会在Web服务器上进行相应的调用。该表的每一行都添加了一个删除按钮，但我不知道如何将其挂钩到一个处理程序，然后处理程序可以向服务器发出signalR调用以将关联的项目删除到删除按钮。谁能告诉我怎么能这样做呢？

我的javascript代码在这里：

(function () {
var itemHub = $.connection.itemHub;

var updateItems = function (items) {
    $("#item-list").empty();

    var table = $("<br/><table border=\"1\" cellpadding=\"5\"></table>");
    var tableRow = $("<tr><td><b>Name</b></td><td><b>Delete</b></td></tr>");
    table.append(tableRow);
    for (var i = 0; i < items.length; i++) {
        tableRow = $("<tr><td>" + items[i] + "</td><td><input type=\"button\" value=\"Delete\" id=\"Delete" + i + "\"></td></tr>");
        table.append(tableRow);
    }
    $("#item-list").append(table);
};

$("#submit").on("click",
    function () {
        var text = $("#textname").val();
        itemHub.server.addItem(text)
            .done(function () {
                console.log("Adding item: " + text);
                $("#textname").val("");
            })
            .fail(function (e) {
                console.log(e);
            });
    });

itemHub.client.itemListUpdated = updateItems;

$.connection.hub.start()
    .done(function () {
        console.log("Connected to SignalR hub");
        itemHub.server.getItems()
            .done(function (items) {
                updateItems(items);
            })
            .fail(function (e) {
                console.log(e);
            });
    })
    .fail(function (e) { console.log(e); });
})();

删除该项目的服务器调用将是：itemHub.server.deleteItem（text）其中“text”与添加的字符串相同。

Answer 1

您可以这样做：

$("body").on("click", "input[value=Delete]", function(){
    var $row = $(this).parents("tr");
    var item = $row.find("td").first().text();
    itemHub.server.removeItem(item);// or whatever is the function for removing items.
    $row.remove();
});

这是有效的，因为在jQuery事件监听器的回调中，this引用了被点击的元素event.target。所以，这样做的目的是获取被点击元素所在的行，获取该行第一列的文本（项目）并删除项目和行。

您应该为所有删除按钮添加一个类名，这样您就可以使用该类名而不是input[value=Delete]作为选择器。

如何动态创建删除按钮来操作它所在的行？

1 个答案: