动态添加的click事件多次触发[重复]

Question

我要在按钮的click事件上向html表中添加一行。在那一行中，我有一个包含li元素的单元格。我已经为li元素分配了click事件。当我点击李的事件被解雇了很多次，我不知道为什么...好心的帮助。

<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());
        })
    })

});

Answer 1

您将多次绑定click处理程序。

// 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时，您都会添加两个额外的事件处理程序，一个添加到body中，另一个添加到所有table元素中。