0

我有一个表格，其中的行是通过元素的单击事件生成的。现在，这完美无缺，问题出在删除部分。例如，我已经添加了 5 行，当我单击删除按钮时（删除按钮也是通过 jQuery 在 addRow() 单击事件上创建的），所有通过 jQuery 函数添加的行都被删除并且表单正在提交事件我调用了一个 e.preventDefault() 方法。

JavaScript/jQuery 代码：

        var counter = 2;            
        window.addRow = function addRow() {
            var newRow = $('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' + counter + '"/></td><td><button class="delete">delete</button></td></tr>');
            counter++;                
            $('table.actionsteps-list').append( newRow );
        }

        $('table.actionsteps-list').on('click', '.delete', function(e){ 
          e.preventDefault(); // stops the page jumping to the top
          $(this).closest('tr').remove();
        });


        function postForm() {
            var form = document.getElementById('actionStepsForm');
            document.getElementById('rowCount').value = counter-1;
            form.submit();
        }

HTML 代码（表单本身）：

<form name="actionStepsForm" id="actionStepsForm" action="add_reprocessing.php?action=add" method="post">
<table class="actionsteps-list" width="510">
        <tr>
            <th colspan="3" align="left">Action Steps</th>
        </tr>
        <tr>
            <td>Step #</td><td>Action Step</td><td>Owner</td>
        </tr>
        <tr>
            <td>
                <label>1</label>
            </td>
            <td>
                <textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea>
            </td>
            <td valign="top">
                <input type="text" name="txtOwner1" />
            </td>
        </tr>
    </table>
    <table width="510">
        <tr>
            <td align="right"><a href="#" title="" onclick="addRow(); return false;">Add Action</a></td>
        </tr>
    </table>
    <input type="button" value="Create" onclick="postForm(); return false;" />
<input type="hidden" value="" id="rowCount" name="rowCount" />
</form>

信不信由你，我已经被困在这里将近 3 天了。我在网上找不到任何修复方法。我不知道有什么问题。

4

1 回答 1

1

放

 $('table.actionsteps-list').on('click', '.delete', function(e){ 
      e.preventDefault(); // stops the page jumping to the top
      $(this).closest('tr').remove();
    });

进入

$(function(){$('table.actionsteps-list').on('click', '.delete', function(e){ 
      e.preventDefault(); // stops the page jumping to the top
      $(this).closest('tr').remove();
    });
 )};
于 2013-09-15T23:17:33.350 回答