Question

HTML

<table class="example" border="1">
    <tr>
        <td>
            <label>Enter text</label>
            <textarea>Enter text</textarea>
        </td>
    </tr>
    <tr class="clone"></tr>
</table>

<p><button id="add-row">Add Row</button></p>

的jQuery

$(document).ready(function() {
    $(this).on('click', function(event) {
        if ( ! $(event.target).closest('table').hasClass('example')) {
            $('table label').show();
            $('table textarea').hide();
        }
    });

    $('table td').on('click', function() {
        $('table label').show();
        $('table textarea').hide();
        $(this).find('label').hide();
        $(this).find('textarea').show();
    });

    $('#add-row').on('click', function() {
        _this = $('table tr.clone')
            .clone()
            .removeClass('clone')
            .insertBefore('.clone');

        _this.append('<td><label>Enter text</label><textarea>Enter text</textarea></td>');
    });                
});

CSS

table textarea {
    display: none;
}

table .clone {
    display: none;
}

上面的链接解释了我正在尝试做的事情。

基本上问题是这个。我在 td 中有标签和 textarea ，隐藏了 textarea ，只有标签< / strong>在开始时显示。当用户点击表格的单元格时，它会隐藏标签并显示 textarea ，这样可以正常运行，直到您尝试添加该行的克隆然后它没有“做任何事。

编辑：忘记提及我为什么要克隆行并在之后添加单元格。在我的实际代码中，我也允许创建列，并且我会对行进行计数并在之后添加单元格。

非常感谢您的帮助=）

Answer 1

另一种方法。

$('table').on('click', "td", function() {

})

Answer 2

将点击处理程序更改为

$(document).on('click', 'table td', function() {
//Your code
}

Answer 3

您可以尝试在.on()事件中使用$('table td').click()方法：

$('table td').on('click', function() {
    $('table label').show();
    $('table textarea').hide();
    $(this).find('label').hide();
    $(this).find('textarea').show();
});

希望有所帮助

Answer 4

希望它可以帮到你

$('.example').delegate('td', "click", function() {

}

jQuery - on（'click'）append似乎不起作用

4 个答案: