0

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

有没有一种方法可以创建一个事件处理程序，该处理程序将使用每行的选定 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>
4

2 回答 2

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');
    });
});
于 2013-03-07T20:41:56.543 回答
1

试试这个：

$("#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"));

});
于 2013-03-07T20:55:19.500 回答