Javascript 动态添加的click事件被多次激发

我在单击按钮事件时向html表中添加一行。在那一行中，我有一个包含li元素的单元格。我已为该li元素指定了单击事件。当我点击li时，事件被炒了很多次，我不知道为什么…请帮忙

<input id="btnAddRow" type="button" value="Add Row" />
<div id="mainSection">
    <table id="tblList" border="1" cellpadding="1" cellspacing="1">

    </table>
</div>
$(document).ready(function ()
{
    $('#btnAddRow').click(function ()
    {
        $('body').on('click', 'li', function () {
            alert($(this).text());
        })
        var markUp = '<tr><td>1</td><td>2</td><td>3</td><td><li>Hello</li></td></tr>';
        $('table').append(markUp);
        $('table').on('click', 'li', function () {
            alert($(this).text());
        })
    })

});

$（文档）.ready（函数（）
{
$（'#btnAddRow'）。单击（函数（）
{
$（'body'）。在（'click'，'li'，函数（）{
警报（$（this.text（））；
})
变量标记='123
你好
'；
$（'table'）。追加（标记）；
$（'table'）。在（'click'，'li'，函数（）{
警报（$（this.text（））；
})
})
});

您要绑定

多次单击
处理程序

// on each click…
$('#btnAddRow').click(function() {
  // bind a click event on body
  $('body').on('click', 'li', function () {
    alert($(this).text());
  })
  // ...
  // bind a click event on every table
  $('table').on('click', 'li', function () {
    alert($(this).text());
  })
})

因此，每次单击
#btnAddRow
时，您都会添加两个额外的事件处理程序，一个添加到
正文
，另一个添加到所有
表
元素。
这是否回答了您的问题？还请记住，您正在创建不符合web标准的html，因为
li
被认为是
ol
、
ul
或
菜单的孩子，您的动作太快了。snwflk链接的问题实际上并不相同，尽管标题不同。