javascript - 重新创建元素后丢失点击事件

Question

我正在删除表 tbody 集并插入新的，但我正在丢失 chekcbox 上的 click 事件。我该如何解决这个问题？

我经历了 append()、clone() 但未能应用到我的代码中，因此我创建了一个 JSFIDDLE什么都有。

请告诉我我需要做什么。

提前致谢。

JSFIDDLE - CODE IS HERE

JQUERY:

$(window).load(function(){
    $('.add-selected').on("click",function() {
       alert('hello');
    });

    $('#removeAndAdd').click(function(event) {
        event.preventDefault();

        var output = '';
        output += '<tbody class="filter-rows">';
        output += '<tr class="filter">';
        output += '<td><input type="checkbox" id="c-1" class="add-selected" /></td>';
        output += '<td>1</td>';
        output += '</tr>';
        output += '</tbody>';

        output += '<tbody class="filter-rows">';
        output += '<tr class="filter">';
        output += '<td><input type="checkbox" id="c-2" class="add-selected" /></td>';
        output += '<td>2</td>';
        output += '</tr>';
        output += '</tbody>';

        $('.filter-rows').empty();
        $('#add-new-table tbody:last').after(output);
    });
});

HTML:

      <table id="add-new-table" border="1px">
        <thead>
            <th>ID</th>
            <th>SKU</th>
        </thead>

        <tbody>
            <tr>
                <td>Lbel</td>
                <td>011</td>
            </tr>
        </tbody>

        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-1" class="add-selected" /></td>
                <td>1</td>
            </tr>
        </tbody>

        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-2" class="add-selected" /></td>
                <td>2</td>
            </tr>
        </tbody>

        <tbody class="filter-rows">
            <tr class="filter">
                <td><input type="checkbox" id="c-3" class="add-selected" /></td>
                <td>3</td>
            </tr>
        </tbody>

    </table>

<br />
<span id='removeAndAdd'>Click me to Remove all first and Add new rows</span>

Answer 1

这里有一些不好的做法。首先是固定版本:

http://jsfiddle.net/678CP/5/

$('#add-new-table').on('change', 'input', function() {
   alert('hello');
});

$('#removeAndAdd').click(function(event) {
    event.preventDefault();

    var rows = $('#add-new-table .filter-rows');

    rows.first().add(rows.last()).remove();
});

1. 我假设您需要创建一个新的 tbody对于每一行 - 否则将其删除。
2. 为什么要重新创建整个表？我假设您不需要，如果您需要，代码需要进行一些更改。
3. 为什么要等待 domLoad？我已将其更改为 onDomReady( fiddle 设置)
4. 可点击的元素应该是 anchor <a>有一个 href
5. 我知道这只是一个演示，但我希望您不要在 html 和 javascript 中混用双引号和单引号，并且不要在所有地方都使用 ID

工作原理:

通过使用 jQuery 的 on 的第二个参数我们创建了一个 event delegate .这意味着事件放在表本身上 #add-new-table它正在监听表内任何输入的变化。所以这是一个单一的事件，它不关心里面的东西是否被更新/删除等。它也更有效率。

还有一个关于var rows = $('#add-new-table .filter-rows'); rows.first().add(rows.last()).remove();的小解释:

“获取所有筛选行并存储它。然后选择第一行并将最后一行添加到该选择，最后删除它们”