Question

我正在尝试克隆最后一行，当点击下面的添加行按钮时，此代码与1.7.1 jquery工作正常，但如果我引用2.0.2不工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

然后它无法正常工作。

我添加了jquery-migrate-1.1.1.js，但仍无用。

请帮忙解决。

<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>

    <body>
<table id="advFilterTable" class="table-filter">
                                <tbody>
                                <tr>
                                    <td>
                                        <select id="advFilterColumn1" name="advFilterColumn1" class="chzn-select filter-column" data-placeholder="Select Column"  style="width: 120px;">
<option value=SupportDesciption>Support Desciption</option>
<option value=CostCentre.CostCentreCode>Cost Centre</option>
<option value=AdditionalPropertyValue.value>System Roles</option>
<option value=AdditionalProperty.Key>System Role Type</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select id="advFilterOperand1" name="advFilterOperand1"  class="chzn-select filter-operand" data-placeholder="Select Operand" style="width: 120px;">
 <option value=Equals>Equals</option>
 <option value=GreaterThan>GreaterThan</option>
 <option value=LessThan>LessThan</option>
 <option value=GreaterThanOrEqual>GreaterThanOrEqual</option>
 <option value=LessThanOrEqual>LessThanOrEqual</option>
 <option value=Contains>Contains</option>
 <option value=StartsWith>StartsWith</option>
 <option value=EndsWith>EndsWith</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input id="advFilterText1" name="advFilterText1" class="filter-text" style="height: 17px; margin-bottom: 8px" type="text" value=""></input>
                                    </td>
                                    <td>
                                        <button class="btn delete-filter" id="advFilterbtn1" name="advFilterbtn1" style="margin-bottom: 8px"><i class="icon-minus"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>  
          <button class="add-filter">Add Row</button>            
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
          $(".add-filter").live('click', function(event) {
            // clone the last row in the table
            var $tr = $('.table-filter').find("tbody tr:last").clone();
            // get the name attribute for the input and select fields
            $tr.find("input,select").attr("name", function() {
                // break the field name and it's number into two parts
                var parts = this.id.match(/(\D+)(\d+)$/);
                if (parts != null) {
                    // create a unique name for the new field by incrementing
                    // the number for the previous field by 1
                    return parts[1] + ++parts[2];
                }
                return rollDice();
                // repeat for id attributes
            }).attr("id", function() {
                var parts = this.id.match(/(\D+)(\d+)$/);
                if (parts != null) {
                    return parts[1] + ++parts[2];
                } 
                return rollDice();
            });
            $('.table-filter').find("tbody tr:last").after($tr);
        });
        </script>       
        </body>
</html>

Answer 1

扩展Lwyrn的回答，

变化

$(".add-filter").live('click', function(event) {

到

$(document.body).on('click', '.add-filter', function(event) {

Answer 2

live函数在jquery 1.7中已弃用，在1.9中完全删除使用.click而不是.live

JQuery 1.7.1中的代码在2.0.2中不起作用

2 个答案: