当我使用 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",&nbsp;"#table1&nbsp;tr",&nbsp;function&nbsp;(){}