如何使用包含动态参数的事件克隆行？

Question

我是jquery的新手，我在google上发现我可以使用.clone ...

但是，它有效但不完全。在这里，当用户点击添加按钮时，我需要克隆一行：

<table id="tableTest">
<tr id="row_element_1" name="row_element">
  <td><span id="labelNumber_1" name="labelNumber_1">1</span></td>
  <td>
    <select id="supplier_1" name="comboA_1" onchange="classTest.loadComboB(this.value, 'ComboB_1')" class="select"></select>
  </td>
  <td>
    <select name="ComboB_1" id="ComboB_1" onchange="classTest.loadComboC(this.value, document.getElementById('comboA_1').value, 'ComboC_1')" class="select"></select>
  </td>
  <td>
    <select name="ComboC_1" id="ComboC_1" onchange="classTest.loadInputA(this.value, 'inputA_1')" class="select"></select>
  </td>
  <td>
    <input type="text" name="inputA_1" id="inputA_1" />
  </td>
  <td>
    <input type="number" min="0" name="inputB_1" id="inputB_1" required="1" value="0" onchange="classTest.calculateTotal('inputA_1', this.value, inputC_1)" />
  </td>
  <td>
    <input type="text" name="inputC_1" id="inputC_1" readonly="readonly" />
  </td>
  <td>
    <button id="remove_btn_1" name="remove_product_btn_1" onclick="classTest.removeElement()">Remove</button>
  </td>
  <td>
    <button id="add_btn_1" name="add_product_btn_1" onclick="classTest.addElement(this)">Add</button>
  </td>
</tr>
</table>

我可以用它来克隆它，但我的问题是事件（如“onchange”不会随着新的动态值而改变......

var classTest = {
loadComboB : function (_idComboA_Selected, comboB) {
    $.ajax({
        method: 'POST',
        url: 'phpfilewithquery.php',
        data: {
                moduleId: 'test',
                itemId: _idComboA_Selected,
                action: 'loabCb_B',
            },
        reader: {
            type: 'json',
            root: 'items'
        },
        success: function (json_res) {
            //console.log(json_res);
            var items = jQuery.parseJSON( json_res );
            comboBox.replaceOption(comboB, items.items);    // custom function which load the combobox "comboB" with items.items
        }
    });
},
loadComboC : function (_idComboB_Selected, _idComboA_Selected, comboC) {
    $.ajax({
        method: 'POST',
        url: 'phpfilewithquery.php',
        data: {
                moduleId: 'test',
                gammeId: _idComboB_Selected,
                supplierId : _idComboA_Selected,
                action: 'loadCb_C',
            },
        reader: {
            type: 'json',
            root: 'items'
        },
        success: function (json_res) {
            var items = jQuery.parseJSON( json_res );
            comboBox.replaceOption(comboC, items.items);
        }
    });
},

loadInputA : function (_idComboC_Selected, inputA_val) {
    $.ajax({
        method: 'POST',
        url: 'phpfilewithquery.php',
        data: {
                moduleId: 'test',
                productId : _idComboC_Selected,
                action: 'loadInp_A',
            },
        reader: {
            type: 'json',
            root: 'items'
        },
        success: function (json_res) {
            var res = jQuery.parseJSON( json_res );
            $('#' + inputA_1).val( res.price );

            // this.calculateTotal();
        }
    });
},
calculateTotal: function (inputA, inputB, inputC){
    var price = $('#' + inputA).val();
    var qty = $('#' + inputB).val();

    var tmp = price * qty;
    var total = tmp.toFixed(2);
    $('#' + inputC).val(total + ' $');

},
removeProduct: function (elm){

},
addProduct: function (elm){
    console.log(elm.parentNode.parentNode);
    var rowToClone = $(elm.parentNode.parentNode).clone(true, true);

    //var newRow = document.getElementById('tableProduct').appendChild(rowToClone);

    var attrLabel = rowToClone.find('span').attr('name');
    var temp = attrLabel.split("_"); 
    var number = parseInt(temp[temp.length-1]);     
    var newNumber = number+1;

    rowToClone.find('input').each(function() {
        if(this.name) {
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
        }
    });

    rowToClone.find('span').each(function() {
        if(this.name){
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
            this.html(number);
        }
    });

    rowToClone.find('select').each(function() {
        if(this.name) {
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
            $( '#' + this.id.replace('_' + number , '_' + newNumber ) ).empty();
        }
    });

    rowToClone.find('button').each(function() {
        if(this.name){
            this.name= this.name.replace('_' + number , '_' + newNumber );
            this.id= this.id.replace('_' + number , '_' + newNumber );
        }
    });

    $("#tableTest").append(rowToClone);


}

};

那么，我可以克隆一行并更改事件中的动态元素吗？

另外，我需要在“loadInputA”函数中成功调用“calculateTotal”。我是否需要将所有参数传递给“loadInputA”？