jQuery – on('click')追加似乎不起作用 [英] jQuery – on('click') append doesn't seem to work

问题描述

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;
}​

上面的链接说明了我要做什么.

The link above explains what I'm trying to do.

基本上，问题是这样的.我在 td 中有一个标签和 textarea ，该 textarea 被隐藏了，只有标签在开始时显示.当用户单击表的单元格时，它会隐藏标签并显示 textarea ，在您尝试添加该行的克隆之前，该方法正常工作，然后它不会什么都不要做.

Basically the problem is this. I have a label and textarea within a td, the textarea is hidden and only the labels show at start. When the user clicks on the cell of the table it hides the label and shows the textarea, which works fine until you try and add a clone of the row then it doesn't do anything.

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

Edit: Forgot to mention why I'm cloning the row and adding the cells afterwards. In my actual code I allow for column creation as well and I do a count of the rows and add the cells after.

非常感谢您的帮助=)

推荐答案

另一种方法.

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

})

这篇关于jQuery – on('click')追加似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！