Question

我有html表并在运行时添加表行。我想添加到新tr（动态tr）添加 ClickEvent 我写这段代码，但它不起作用

$（“＃GridView1 tbody tr”）。点击（功能（e）{

                var id = $(this).find(".lbl").text();
                workOrderId = id;
                //  $("#gridtbl tr").remove();
                $.ajax({
                    url: "PublicHandler.ashx",
                    contentType: "application/json; charset=utf-8",
                    data: { workOrderId: id },
                    success: function (data) {
                        var grd = $("#gridtbl");
                        $.each(data, function (i, b) {
                            var str = "<tr>";
                            str += "<td style='display: none;'>" + b.WorkId + "</td>";
                            str += "<td>" + b.WorkName + "</td>";
                            str += "<td>" + b.SectionName + "</td>";
                            str += "<td>" + b.SectionSupervisor + "</td>";
                            if (b.RequestCount == null) {
                                str += "<td>" + " " + "</td>";
                            } else {
                                str += "<td>" + b.RequestCount + "</td>";
                            }

                            str += "<td>" + " " + "</td>";

                            str += "</tr>";
                            $(str).click(function () {
                                alert("hiiiiiiiiiii");

                            }).end().appendTo("#gridtbl tr");
                            // grd.append(str);

                        });
                    },
                    dataType: "json"

                });
                popup(e);
            });

Answer 1

您可以使用delegate

$("#GridView1 tbody").delegate("tr", "click", function(e) {
  //rest of the code here
});

或最近在jquery 1.7中，您可以使用on

$("#GridView1 tbody").on("click", "tr", function(e){
    //rest of the code here
});

正如@Matt的评论中提到的live方法deprecated最好不要使用，但我会保留示例

  $("#GridView1 tbody tr").live("click",function (e) {

Answer 2

使用以下内容代替$("#GridView1 tbody tr").live("click" ,function (e)

Answer 3

我建议不要将click事件绑定到您添加的每个tr，而是查看委托函数。

详细了解委托here。

也有人建议直播，我不建议那样做。因为在你的例子中你总是希望在表中绑定（它具有唯一的Id），所以不是让偶然监听正文（绑定到它），而是将它绑定（委托）给表。

Answer 4

如果您已添加动态表..那么您可以使用以下代码在行单击上获取行数据。注意：您可以使用表行的类名或Id名称而不是'tr'。

  $("body").on('click', 'tr', function () 
   {
          var Name = $(this).find('td:first').text();
          alert(Name);
   });

Answer 5

你也可以这样做。

$.each(data, function (i, b) {
    $tr = $('<tr />', {
        id : <tr_id>,
        on : {
            click : function (e) {
                // here goes the click event logic
            }
        }
    }).appendTo("#gridtbl");
});

如何添加事件在表格中单击动态tr

5 个答案: