新版本中损坏的jQuery功能-向表单表中动态添加行 [英] jQuery functionality broken in new version - dynamically adding rows to a form table

问题描述

请参考此小提琴/questions/12028718/jquery-cloned-table-row-not-retrievable-from-dom?lq = 1>这个答案由adeneo .

Please refer to this fiddle from this answer by adeneo.

这一直工作到几个月前，当时jquery中的某些更改必须破坏了它.它在我的网站以及上面链接的小提琴中都中断了.

This worked until a few months ago when some change in jquery must have broken it. It broke on my site and also in the fiddle linked above.

这是html和jquery:

Here's the html and jquery:

$(function() {
    $('#processname').on('click', '.addRow', function() {
        var body = $(this).closest("tbody");
        var row = $(this).closest("tr");
        var newNum = $(".operation").length + 1;
        var clone = row.clone();
        clone.find('.rowNumber').html(newNum);
        body.append(clone);
    });
});

<form id="processname" name="processname" method="post" action="" >
    <table border="1" width="50%" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td align="right" valign="middle">Order</td>
            <td align="left" valign="middle">Process</td>
            <td>Operation</td>
            <td>Value</td>
            <td>+</td>
            <td>&ndash;</td>
        </tr>
        <tr>
            <td><span class="rowNumber">1</span></td>
            <!--<td><span class="rowNumber">1</span></td>-->
            <td>
                <select class="process" name="category_1" id="category_1" onChange="javascript: dropdownlist(this); elementPos(this)">
                <option value="">Select Category</option>
                <option value="3" selected="selected">translate</option>
                <option value="4">math</option>
                <option value="5">format</option>
                <option value="6">write</option></select>
            </td>
            <td align="left" valign="middle">
                <select class="operation" name="operation_1" id="operation_1">
                    <option value="">Select Sub-Category</option>
                    <option value="s->c" selected="selected">Use source as core by default</option>
                    <option value="s->t->c">Only process translated values</option>
                </select>
            </td>
            <td>
                <input type="text" name="value_1" id="value_1" value="" />
            </td>
            <td><input type="button" style="max-width:5em" class="addRow" value="+" /></td>
            <td><input type="button" class="delRow" value="-" /></td>
        </tr>
    </table>
</form>

推荐答案

看来您有一个不幸的类名-addRow似乎已被AdBlock隐藏. 将类名称更改为appendRow，一切似乎都很好.

It appears you have an unfortunate class name - addRow seems to be hidden by AdBlock. Change the class name to appendRow and everything seems to be fine.

http://jsfiddle.net/XeSbE/6/

这篇关于新版本中损坏的jQuery功能-向表单表中动态添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！