Question

我正在尝试创建一个在表格中添加“添加新产品”部分的订单。基本上用户应该能够点击“添加行”链接，并且将出现一个新的输入行，允许用户将另一个产品添加到订单列表中。我能够完成这项工作一次，但之后表单将不会添加任何新行。在console.log中，我可以看到事件处理程序仅处理原始表单元素，而不是新产品输入行。我有一个简短的小提琴我在这里工作：

http://jsfiddle.net/scottm1164/eTBr6/5/

这是我的jQuery：

<script>
 $(document).ready(function () {
    (function () {
        var start = $('table'),
            newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
        $('.addRow').on('click', function () {
            $(start).append(newRow);
            console.log(this);
        });

    })(); //end SIAF

}); //END document ready
</script>

这是我的表格：

<form enctype="multipart/form-data" method="post" action="#" id="orderForm">
    <ul>
        <li>Name:
            <br>
            <input type="text" id="name" />
        </li>
        <li>Email:
            <br>
            <input type="email" id="email" />
        </li>
        <li>Company:
            <br>
            <input type="text" id="company" />
        </li>
        <li>Phone:
            <br>
            <input type="tel" id="phone" />
        </li>
        <li>Delivery Address:
            <br>
            <input type="text" id="delAddress" />
        </li>
        <li>PO Number:
            <br>
            <input type="text" id="poNum" />
        </li>
        <li>If you have a document for your order, attach it here:
            <br>
            <input type="file" id="docs" />
        </li>
        <li>
            <table id="prodTable" width="auto" border="0" cellpadding="4" cellspacing="4">
                <tbody>
                    <tr>
                        <td>Quantity</td>
                        <td>Product Number</td>
                        <td>Product Description</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" class="quantity" name="quantity_" />
                        </td>
                        <td>
                            <input type="text" class="prodNum" name="prodNum_" />
                        </td>
                        <td>
                            <textarea cols="15" rows="1" name="prodDesc_"></textarea>
                        </td>
                        <td>
                            <p class="addRow">Add a Row</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </li>
        <li>Special Delivery Instructions:
            <br>
            <textarea cols="30" rows="10" id="instructions"></textarea>
        </li>  
    </ul>
    <input type="submit" id="submit" />
</form>

有人可以向我解释这段代码出了什么问题，我对jQuery / Javascript还不熟悉，所以我只是不明白为什么代码只能运行一次，而不是在后续点击“添加一行”之后“链接，仅在原始”添加行“链接上，但不在新创建的链接上。

Answer 1

试试这个

http://jsfiddle.net/eTBr6/8/

$('form').on('click', '.addRow', function () {
    var start = $('table'),
        newRow = $('<tr><td><input type="text" class="quantity" /></td>' +
                   '<td><input type="text" class="prodNum" /></td>' +
                   '<td><textarea cols="15" rows="1"></textarea></td>' +
                   '<td><p class="addRow">Add a Row</p></td></tr>');
    $(start).append(newRow);
});

将变量放在点击处理程序中，并通过将表单作为上下文

来使用事件委派

Answer 2

工作DEMO

我想这就是你需要的。对于动态加载的元素，委托$(document).on()是正常函数（）所必需的，因为正常事件仅在页面加载时起作用。

这是代码

$(document).ready(function () {

    var start = $('table'),
        newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';


    $(document).on('click', '.addRow', function () {
        $(start).append(newRow);
    });
}); //end document.ready

希望这有帮助，谢谢

Answer 3

我做了类似johnathan的事，只是没那么快。

在这里小提琴：http://jsfiddle.net/xCNqP/1/

(function () {

        var start = $('table'),
            newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><input type="text" maxlength="15"/></td><td><p class="addRow">Add a Row</p></td></tr>';


        $(document).on('click', '.addRow', function () {
            $(start).append($(newRow));
        });

    })(); //end SIAF

我使用的主要更改是将newRow设置为一个字符串，因为声明该元素只允许您附加一次。需要重新声明（jonathan通过在处理程序中移动声明而做的）重新声明。

还包括on的正确用法，以便附加到新元素。

Answer 4

http://jsfiddle.net/LK5sj/将你的newrow放在函数中并使函数递归，并且不要忘记清除并重新分配事件处理程序，否则你将获得比你想要的更多的新行

var start = $('table');

function addRow(){    
    newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
    $(start).append(newRow);
    $('.addRow').off('click');
    $('.addRow').on('click', function() {
        addRow();
    });
}

$('.addRow').on('click', function() {
    addRow();
});

允许用户添加表单输入字段：为什么append（）只能使用一次？

4 个答案:

工作DEMO