Question

我正在处理以下代码清单。我想在特定的表格单元格中添加更多的textareas。每个单元格都可以有许多单独的textareas，我用jQuery添加或删除。当我点击添加时，它会添加，但是当我点击删除时，它会取消一个完整的表格行，然后再次点击第二行添加textareas，然后将textareas添加到顶行。我错过了什么？

<html>
    <head>

        <script type="text/javascript">
            $(function() {
                var addDiv = $('#addinput');
                var i = $('#addinput td').size() + 1;

                $('#addNew').live('click', function() {
                    $('<tr><td><textarea  id="p_new" rows="1" cols="10" name="data[]" value="" placeholder="I am New" ></textarea><a href="#" id="remNew"><img src="<?php echo base_url(); ?>img/remove.png" alt="x" width="15px" height="15px"></a><td> </tr>').appendTo(addDiv);
                    i++;

                    return false;
                });

                $('#remNew').live('click', function() {
                    if( i > 2 ) {
                        $(this).parents('td').remove();
                        i--;
                    }
                    return false;
                });
            });

        </script>

    </head>
    <body>       

        <table border="1">
            <tr>

            <td id="addinput">
                <textarea  id="p_new" rows="1" cols="10" name="data[]" value="" placeholder="Input Value" ></textarea><a href="#" id="addNew"><img src="<?php echo base_url(); ?>img/add.png" alt="+" width="15px" height="15px"></a>
            </td>
            </tr>
               <tr>           
            <td>
                <textarea  id="p_new" rows="1" cols="10" name="data[]" value="" placeholder="Input Value" ></textarea><a href="#" id="addNew"><img src="<?php echo base_url(); ?>img/add.png" alt="+" width="15px" height="15px"></a>
            </td>
            </tr>

        </table>       

    </body>
</html>

Answer 1

jQuery 1.9.1不支持

Live

使用on来附加委派事件

 $('#remNew').live('click', function() {
 $('#addNew').live('click', function () {

应该是

 $('table').live('click', '.remNew', function() {

 $('table').live('click', '.addNew', function() {

ID应该在HTML网页上是唯一的。

所以用类代替

您的HTML应该是这样的

<textarea  class="p_new" rows="1" cols="10" name="data[]" value=""
      placeholder="I am New" >
</textarea>

<a href="#" class="remNew">

<强> Working Fiddle

动态地将td添加到特定的tr并且能够删除td

1 个答案: