Question

以下代码无法正常工作...... 它只能工作一次我如何执行我想要的相同输出... 有些人可以告诉那里有什么问题以及为什么???

<!DOCTYPE html>
<html>
<head>
<title>Create New Table Row</title>
<script src="jquery-2.1.1.js" type="text/javascript"></script>

<script>
    jQuery(function(){
        var counter = 1;
        jQuery('a.newRec').click(function(event){
            event.preventDefault();
            counter++;
             var newRow = jQuery('<tr><td><input type="text" name="textbox[]' +
                 counter + '"/></td><td><input type="text" name="textbox[]' +
                 counter + '"/></td><td ><a href="#" class="newRec">A New Row</a></td></tr>');
             jQuery('table.rec').append(newRow);
            var par = $(this).parent(); //tr par.remove(); };
            par.remove();

        });
    });
</script>
</head>
<body>
<table border="1px" class="rec">
<tr>
    <th>Name</th><th>Email</th></tr>
<tr >
    <td><input type="text" name="textbox[]"/></td>
    <td><input type="text" name="textbox[]"/></td>
    <td ><a href="#" class="newRec">A New Row</a></td>
</tr>
</table>
</body>
</html>

Answer 1

点击事件在加载时被绑定到仅当时存在的匹配元素。

相反，您需要使用附加到不变的祖先元素的委托事件处理程序。

jQuery(function($){
    var counter = 1;
    $('table.rec').on('click', 'a.newRec', function(event){
        event.preventDefault();
        counter++;
         var newRow = $('<tr><td><input type="text" name="textbox[]' +
             counter + '"/></td><td><input type="text" name="textbox[]' +
             counter + '"/></td><td ><a href="#" class="newRec">A New Row</a></td></tr>');
         $('table.rec').append(newRow);
         var par = $(this).parent(); //tr par.remove(); };
         par.remove();

    });
});

注意：

为DOM准备处理程序提供了一个本地作用域的jQuery，因此只需添加$作为参数。然后，您可以在功能中使用$而不会发生冲突。
委托事件处理程序附加到您的表并侦听从其后代冒出的单击事件。它然后应用jQuery选择器。然后将函数应用于导致事件的任何匹配元素。这意味着它适用于活动时存在的元素（不仅仅是事件注册时间）

通常的做法是将不变元素定位在接近变化元素的位置，因此我选择了table class=rec。如果没有其他方便的话，默认使用是document。不要将'body'用于委派事件，因为样式可以使其不响应鼠标单击。

建议：

我总是建议避免将字符串串起来，因为这很难维护并且容易出错。

另一种方法是将模板放在一个不可见的元素中（一个带有未知type的虚拟脚本块是一个不错的选项），然后使用该模板构建任何新元素。

e.g。 JSFiddle： http://jsfiddle.net/TrueBlueAussie/nvL9bvk5/1/

<script id="newrow" type="text/template"> <tr> <td><input type="text" name="textbox[]{i}"/></td><td><input type="text" name="textbox[]{i}"/> </td><td><a href="#" class="newRec">A New Row</a></td> </tr> </script>

您可以像这样使用（使用regEx替换所有出现的“占位符”）：

var newRow = $('#newrow').html().replace(/{i}/g, counter++);

e.g。

jQuery(function($){ var counter = 1; $('table.rec').on('click', 'a.newRec', function(event){ event.preventDefault(); var newRow = $('#newrow').html().replace(/{i}/g, counter++); $('table.rec').append(newRow); $(this).parent().remove(); }); });

这使得模板非常容易阅读维护并避免许多常见错误（无法关闭元素等）。

Answer 2

试试这个：

jQuery(function(){
    var counter = 1;
    jQuery(document).on('click', 'a.newRec', function(event){
        event.preventDefault();
        counter++;
         var newRow = jQuery('<tr><td><input type="text" name="textbox[]' +
             counter + '"/></td><td><input type="text" name="textbox[]' +
             counter + '"/></td><td ><a href="#" class="newRec">A New Row</a></td></tr>');
         jQuery('table.rec').append(newRow);
        var par = $(this).parent(); //tr par.remove(); };
        par.remove();

    });
});

您的代码无效，因为在加载DOM后动态附加元素。因此，您必须将您的事件监听器绑定到现有元素（例如文档）您添加元素的父级。

因此，您的事件必须通过delegated - 元素传播到动态添加的元素。在我的示例中，选择器作为.on() - 函数的第二个参数传递。

Answer 3

够容易......

我首先更新您的HTML，使第一行的名称为“textbox [] 1”以保持一致。

您必须在父元素上创建一个单击侦听器，以侦听锚标记的点击，以便在添加锚标记时，您不必单独为它们绑定新的单击处理程序。

以下是工作示例的链接：http://jsfiddle.net/4pkxx34p/1/

$(document).ready(function () {
    // Bind a click listener for the a.newRec to the containing table
    $('table.rec').on('click', 'a.newRec', function (e) {
        // Avoid any unwanted navigation
        e.preventDefault();
        // Clone your existing row
        var newRow = $(this).closest('tr').clone();
        // Update names of text inputs
        $(newRow).find('input').each(function() {
            $(this).attr({'name': 'textbox[]' + String($('table.rec').find('tr').length)});
        });
        // Remove the last row's last td
        $('table.rec').find('tr:last').find('td:last').remove();
        // Append the cloned row to your table
        $('table.rec').append(newRow);
    });
});

如何删除最后一个html表并添加新行？

3 个答案: