0

我正在尝试创建一个在表格中包含“添加新产品”部分的订单。基本上，用户应该能够单击“添加行”链接，然后会出现一个新的输入行，允许用户将另一个产品添加到订单列表中。我可以完成一次这项工作，但之后表单不会添加任何新行。在 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 还很陌生，所以我只是不明白为什么代码只能工作一次，但在随后点击“添加一行”链接之后就不行了，并且仅在原始的“添加行”链接上，而不是在新创建的链接上。

4

4 回答 4

3

试试这个

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);
});

将变量放入单击处理程序中，并通过将表单作为上下文来使用事件委托

于 2013-10-17T19:03:50.253 回答
1

工作演示

我想这就是你需要的。对于动态加载的元素，委托 $(document).on() 比普通 function() 是必需的，因为普通事件仅在页面加载时起作用。

这是代码

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

希望这会有所帮助，谢谢

于 2013-10-17T19:15:08.757 回答
0

我做了一些类似于约翰纳森的事情，只是没有那么快。

在这里小提琴：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 通过在处理程序中移动声明所做的）需要重新附加。

还包括正确使用onso 它将附加到新元素的方法。

于 2013-10-17T19:09:53.753 回答
0

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

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();
});
于 2013-10-17T19:30:57.943 回答