Code in JQuery 1.7.1 not working in 2.0.2

Question

I am trying to clone last row when Add Row button is clicked as below, this code is working fine with 1.7.1 jquery but if i refer 2.0.2 not working

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

then it is not working.

I have added jquery-migrate-1.1.1.js but still no use.

Please help to resolve.

<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

to expand upon Lwyrn's answer,

change

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

to

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

Answer 2

在jQuery 1.7中不推荐使用live函数，而在1.9中则完全删除了它，请使用.click而不是.live

Code in JQuery 1.7.1 not working in 2.0.2

Question

2 answers

solution1
4 ACCPTED 2013-07-31 16:21:45

solution2
3 2013-07-31 16:20:19

Code in JQuery 1.7.1 not working in 2.0.2

Question

2 answers

solution1 4 ACCPTED 2013-07-31 16:21:45

solution2 3 2013-07-31 16:20:19

solution1
4 ACCPTED 2013-07-31 16:21:45

solution2
3 2013-07-31 16:20:19