http://jsfiddle.net/D6be5/

的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,在您尝试添加该行的克隆之前,该标签工作正常,然后它不会执行任何操作。

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

非常感谢您的帮助=)

最佳答案

另一种方法。

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

})

关于javascript - jQuery – on('click')追加似乎无效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14133570/

10-15 15:49