将td动态添加到特定tr中，并能够删除td

我正在处理以下代码列表。我想在特定的表单元格中添加更多的文本区域。每个单元格可以有许多单独的文本区域，我使用jQuery添加或删除这些区域。当我单击添加时，它会添加，但当我单击删除时，它删除了一个完整的表行，然后如果我再次单击第二行在那里添加文本区域，它会将文本区域添加到最上面一行。我错过了什么？

<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>

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">

工作Fiddle

相关内容

最新更新

热门标签：