克隆后如何确保j查询函数的推论工作

Question

克隆和计算代码在第一部分中可以很好地工作，但是对于克隆的表单，计算代码停止了

// CODE OF CLONE FOR TRANSFERS
var gentransferid = 2;
$(".add-row-transfer").click(function() {
var $clone = $("ul.transfer-details").first().clone();
var $input = $clone.find('#transferid');
$input.val(gentransferid).attr('gentransferid', +gentransferid)

$clone.find('#transfer_sale').val('');
$clone.find('#transfer_cost').val('');
$clone.find('#transfer_profit').val('');

$clone.append("<button type='button' class='remove-row-transfer'>-</button>");
$clone.insertBefore(".add-row-transfer");
gentransferid++;
});
// CODE OF REMOVE CLONE FOR TRANSFERS
$(".cloned-removed-div-transfer").on("click", ".remove-row-transfer", function() {
$(this).parent().remove();
gentransferid--;
});

$(document).on('change', '.transfer_cost', function() {
$(".transfer_profit").val((parseFloat($(".transfer_sale").val()) - parseFloat($(".transfer_cost").val())));
});

$(document).on('change', '.transfer_sale', function() {
$(".transfer_profit").val((parseFloat($(".transfer_sale").val()) - parseFloat($(".transfer_cost").val())));
});

jsfiddle

通过克隆时如何休息下拉列表

Answer 1

请尝试以下操作：

    $(document).ready(function() {

            $("#btnAddNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#systable");
                var $trLast = $tableBody.find("tr:last");
                var $trNew = $trLast.clone();
                var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                $trNew.find("td:last").html('<a href="#" class="remove" >Remove</a>');
                $.each($trNew.find(':input'), function (i, val) {
                    // Replaced Name
                    var oldN = $(this).attr('name');
                    var newN = oldN.replace('_' + suffix , '_' + (parseInt(suffix) + 1) );
                    $(this).attr('name', newN);
                    $(this).attr('id', newN);


                });
                $trLast.after($trNew);
            });

            // 2. Remove
            $(document).on('click', 'a.remove', function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
            });

            $(document).on("blur", ".transfer_sale_css", function () {

                CalculateDifference();
            });


            $(document).on("blur", ".transfer_cost_css", function () {

                CalculateDifference();
            });



            $(document).on("blur", ".transfer_profit_css", function () {

                CalculateDifference();
            });


           /*$("#transfer_sale_0").blur(function () {
               CalculateDifference();
           })

            $("#transfer_cost_0").blur(function () {
                CalculateDifference();
            })

            $("#transfer_profit_0").blur(function () {
                CalculateDifference();
            })*/


            function CalculateDifference() {

               var transfer_sale=[],transfer_cost=[],transfer_profit=[];
                var i = 0;

                $('#systable tr td:nth-child(2)').each(function () {
                    if (i == 0) {
                        transfer_sale[i] = $(this).find('input[type="text"]').val();

                    }
                    else {
                        transfer_sale[i]= "," + $(this).find('input[type="text"]').val();
                    }
                    i++;
                });

                i = 0;

                $('#systable tr td:nth-child(3)').each(function () {
                    if (i == 0) {
                        transfer_cost[i] = $(this).find('input[type="text"]').val();

                    }
                    else {
                        transfer_cost[i]= "," + $(this).find('input[type="text"]').val();
                    }
                    i++;
                });


                i = 0;

                $('#systable tr td:nth-child(4)').each(function () {
                    if (i == 0) {
                        transfer_profit[i] = $(this).find('input[type="text"]').val();

                    }
                    else {
                        transfer_profit[i]= "," + $(this).find('input[type="text"]').val();
                    }
                    i++;
                });


                for(i=0;i<=transfer_profit.length-1;i++) {
                    var transfer_sale_val = parseFloat($("#transfersale_"+i.toString()).val());
                    var transfer_cost_val = parseFloat($("#transfercost_"+i.toString()).val());

                    var transfer_profit_val = transfer_sale_val - transfer_cost_val;

                    $("#transferprofit_"+ i.toString()).val(transfer_profit_val);
                }
                    //alert(transfer_sale);
                    //alert(transfer_cost);
                    //alert(transfer_profit);

            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form>
        <table align="center" id="systable">
            <tr>
                <td>
                    <select name="dropdown_0">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </td><td>
                    <input type="text" id="transfersale_0" name="transfersale_0" class="transfer_sale_css" >
            </td>
                <td>
                    <input type="text" id="transfercost_0" name="transfercost_0" class="transfer_cost_css">
                </td>
                <td>
                    <input type="text" id="transferprofit_0" name="transferprofit_0" class="transfer_profit_css">
                </td>
                <td></td>
            </tr>
        </table>
        <table align="center">
        <tr>
            <td>
            <button type="button" id="btnAddNew" class="add-row-transfer" >+ New Car</button></td>
        </tr>
        </table>
    </form>
</div>