Question

我正在删除表 tbody 设置并插入新的表格，但我在chekcbox上丢失了点击事件。我该如何解决这个问题？

我经历了append（），clone（），但未能应用于我的代码，因此我创建了一个JSFIDDLE，其中包含所有内容。

请告诉我我需要做什么。

提前致谢。

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

我假设您需要为每一行创建一个新的tbody - 否则将其删除。
为什么重新创建整个表？我假设你不需要，如果你做代码需要一些改变。
为什么要等待domLoad？我已将其更改为onDomReady（小提琴设置）
可点击元素应为具有href

<a>

我知道这只是一个演示，但我希望你不要在你的html和javascript中混用双引号和单引号，并且你不会在任何地方使用ID

工作原理：

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

对var rows = $('#add-new-table .filter-rows'); rows.first().add(rows.last()).remove();的一个小解释：

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

重新创建元素后丢失单击事件

1 个答案: