Question

如果我手动创建副本，一切正常，但是当我尝试使用j-query复制元素时，除了原始创建的条目之外，该函数不起作用。第一个输入标记有一个与之关联的自动完成源。也只适用于原始元素而不适用于克隆的类。

<div class="row add">
      <form id="form1" action="#">
        <input class="col-md-offset-1 col-xs-3 inpro clac" id="inpro1">
        <input class="col-xs-1 mrp calc" id="mrp1">
        <input class="col-xs-1 qt calc" id="qt1">
        <input class="col-xs-1 dis calc" id="dis1">
        <div class="col-xs-2 amt calc" id="amt1"></div>
        <input type="submit" class="sub" id="sum1">
      </form>
    </div>
    <button class="row col-md-offset-1 col-xs-1 add" id="copy">Add</div>
</div>

<script>
    $('.calc').blur(function(e){
        var k = this.id.substr(this.id.length-1);
        var mrp =   parseFloat( $('#mrp'+k).val()   );
        var qt =    parseFloat( $('#qt'+k).val()    );
        var di =    $('#dis'+k).val();
        var dis =   parseFloat( di );
        var disc = di.substr(di.length-1);
        var amt = "";
        if (mrp>0 && qt>0 && dis>0) {
            if (disc === "%") {
                amt = mrp*qt - mrp*qt*dis/100;
            } else {
                amt = mrp*qt - dis;
            }
            var amount = "Rs."+ " " + Math.round( amt ) + " "+ "/-";
        }
        $('#amt'+k).html(amount);
        e.preventDefault();
    });

    var scale = $("#copy").click(function() {
        var add = $(".add");
        var cnt = add.length + 1;
        add.eq(0).clone().insertBefore(this)
        .find("form").attr("id", "form" + cnt)
        .find("input, div").each(function() {
            this.id = this.id.replace(/\d+/, cnt);
            if ($(this).is('div')) {
                $(this).text = $(this).text("");
            } else {
                this.value = null;
            }
        });
    });
</script>

这是小提琴http://jsfiddle.net/UwMML/

Answer 1

我已编辑fiddle，

您必须将绑定功能分开，因为每次添加一组输入字段时都必须使用它来绑定blur事件。在你的代码中，blur事件只被绑定到.calc一次。

这部分将进行第一次事件绑定

$(document).ready(function(){
    reBind();
});

每次单击“添加”按钮，此功能都将执行。它将取消绑定所有先前的绑定（以使DOM开销最小化）并将blur事件重新绑定到所有.calc输入

function reBind(){
    $('.calc').unbind("blur").blur(function(e){
            var k = this.id.substr(this.id.length-1);
            var mrp =   parseFloat( $('#mrp'+k).val()   );
            var qt =    parseFloat( $('#qt'+k).val()    );
            var di =    $('#dis'+k).val();
            var dis =   parseFloat( di );
            var disc = di.substr(di.length-1);
            var amt = "";
            if (mrp>0 && qt>0 && dis>0) {
                if (disc === "%") {
                    amt = mrp*qt - mrp*qt*dis/100;
                } else {
                    amt = mrp*qt - dis;
                }
                var amount = "Rs."+ " " + Math.round( amt ) + " "+ "/-";
            }
            $('#amt'+k).html(amount);
            e.preventDefault();
        });
}

Answer 2

添加新元素后，您需要重新初始化calc函数：

function calc() {
    $('.calc').blur(function (e) {
        var k = this.id.substr(this.id.length - 1);
        var mrp = parseFloat($('#mrp' + k).val());
        var qt = parseFloat($('#qt' + k).val());
        var di = $('#dis' + k).val();
        var dis = parseFloat(di);
        var disc = di.substr(di.length - 1);
        var amt = "";
        if (mrp > 0 && qt > 0 && dis > 0) {
            if (disc === "%") {
                amt = mrp * qt - mrp * qt * dis / 100;
            } else {
                amt = mrp * qt - dis;
            }
            var amount = "Rs." + " " + Math.round(amt) + " " + "/-";
        }
        $('#amt' + k).html(amount);
        e.preventDefault();
    });
}

calc();

var scale = $("#copy").click(function () {
    var add = $(".add");
    var cnt = add.length + 1;
    add.eq(0).clone().insertBefore(this)
        .find("form").attr("id", "form" + cnt)
        .find("input, div").each(function () {
        this.id = this.id.replace(/\d+/, cnt);
        if ($(this).is('div')) {
            $(this).text = $(this).text("");
        } else {
            this.value = null;
        }
    });
    calc();
});

FIDDLE

使事物动态化的问题

2 个答案: