Question

我有下面的函数生成按钮行。

有没有办法创建一个使用每行选定ID的事件处理程序（val.Id）？

由于

            $("#test").on("click", "input.select", function () {
            alert($(this).closest("tr").data("resultId"));
        });

        $("#btnSearch").click(function () {
            var searchTerm = $("#tbSearchField").val();
            $.getJSON('http://localhost:50151/api/principals/' + searchTerm, function (data) {
                var html = ""
                var sel = ""

                $.each(data, function (key, val) {
                    sel = val.Id
                    html += '<tr data-result-id="' + sel + '">'
                    html += '<td><input class="select" type="button" text="Select" value="Select"></td>'
                    html += '</tr>'
                });
                $(html).appendTo('#test');
            });
        });

以下是生成的HTML的样子：

<table id="test" border="0" style="border: none; width: 100%; padding: 2px;">
<tbody>
    <tr data-result-id="1999860918">
        <td>
            <input class="select" type="button" value="Select" text="Select">
        </td>
    </tr>
    <tr data-result-id="1169565143">
        <td>
            <input class="select" type="button" value="Select" text="Select">
        </td>
    </tr>
    <tr data-result-id="1404344114">
        <td>
            <input class="select" type="button" value="Select" text="Select">
        </td>
    </tr>
</tbody>
</table>

Answer 1

将ID添加到行中，然后从那里获取。

html += '<tr data-result-id="' + sel + '">'

然后，在当前代码之上，

$("#test").on("click","td input[type=button]", function(){
    alert( $(this).closest("tr").data("resultId") );
});

删除onlick属性。

最终结果：

$("#test").on("click","input.select", function(){
    alert( $(this).closest("tr").data("resultId") );
});
$("#btnSearch").click(function () {
    var searchTerm = $("#tbSearchField").val();
    $.getJSON('http://localhost:50151/api/principals/' + searchTerm, function (data) {
        var html = ""

        $.each(data, function (key, val) {
            var sel = val.Id;
            html += '<tr data-result-id="' + sel + '">';
            html += '<td><input type="button" class="select" text="Select" value="Select"></td>';
            html += '</tr>';
        });
        $(html).appendTo('#test');
    });
});

Answer 2

试试这个：

$("#btnSearch").click(function () {
            var searchTerm = $("#tbSearchField").val();
            $.getJSON('http://localhost:50151/api/principals/' + searchTerm, function (data) {
                var html = ""
                var sel = ""

                $.each(data, function (key, val) {
                    sel = val.Id
                    html += '<tr>'
                        html += '<td><input type="button" text="Select" value="Select" data-valId="' + sel +'"></td>'
                    html += '</tr>'
                });
                $(html).appendTo('#test');
            });
        });


$("input[type='button']").on('click',function(){
    console.log($(this).data("valId"));

});

动态创建按钮和事件处理程序

2 个答案: