当我使用 jquery 附加到 HTML 表时，我无法触发表行单击事件

Question

我正在使用 asp.net mvc。我正在尝试使用 jquery 附加到 HTML 表。我从 getJSON 调用获取行并将它们附加到表中。行已附加，但由于某种原因，添加的行不会触发单击事件。我认为这可能与时间或其他原因有关，但我不确定。控制器using System;using System.Web;using System.Web.Mvc;namespace Test{    public class HomeController : Controller    {        public ActionResult Index()        {            return View();        }        public ActionResult Test(string x)        {            string strJson = "[{\"name\":\"tom\",\"number\":\"111\"},{\"name\":\"bill\",\"number\":\"222\"}]";            return Json(strJson, JsonRequestBehavior.AllowGet);        }    }}看法@{    Layout = null;}<style>    td {        border: 2px solid black;    }</style><br /><br /><table id="table1">    <tr>        <td>            name        </td>        <td>            number        </td>    </tr></table><br /><br /><button id="button1" type="button">append rows</button><script src="~/Scripts/jquery-3.4.1.js"></script><script>    //table click event    $(document).ready(function () {        $("#table1 tr").click(function () {            alert("table row clicked");        });    });    //button click event    $(document).ready(function () {        $("#button1").click(function () {            $.getJSON('@Url.Action("Test")', { x: "1" }, function (y) {                y = $.parseJSON(y);                $.each(y, function (i, item) {                    $('#table1').append('<tr><td>' + item.name + '</td><td>' + item.number + '</td></tr>');                });            });        });    });</script>

Answer 1

该事件未触发，因为该行是在附加事件处理程序后添加的。使用：

$(document).on("click", "#table1 tr", function (){}