Question

我正在研究jquery代码以将动态字段添加到我的字段列表中，我有几个web链接但是大多数使用live命令都没有按预期工作，所有我在jquery UI Tabs中执行此操作

我尝试使用此代码，因为它运行良好但有几个问题：

function trimNums(stringToTrim)
        {
            return stringToTrim.replace(/\d+$/,"");
        }         
        function dupForm(divId, divClass, btnAdd, btnRm)
        {
        //alert(divId+'   '+divClass);
            var num     = $(divClass).length;
            var newNum  = new Number(num + 1);
            var i;

            var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);

            for (i=0; i < newElem.children().length; i++)
            {
                var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
                var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));

                newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum);
            }
            $('#' + divId + num).after(newElem);
            $('#' + btnRm).attr('disabled',false);

            //if (newNum == 15)
                //$('#' + btnAdd).attr('disabled','disabled');
        }

        function rmForm(divId, divClass, btnAdd, btnRm)
        {
            var num = $(divClass).length;

            $('#' + divId + num).remove();
            //$('#' + btnAdd).attr('disabled','');

            if (num-1 == 1) {
                $('#' + btnRm).attr('disabled','disabled');
                $('#' + btnAdd).attr('disabled',false); 
            }
        }
<div>
        <input type="button" id="btnAdd" class="btn" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Add" />
        <input type="button" id="btnDel" class="btn" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Remove" /><br /><br />
    </div>
            <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                <input type="text" class="input-block-level-inputfields" name="product1" id="product1" placeholder="Product Details" />
                <input type="text" class="input-block-level-inputfields" name="price1" id="price1" style="width:50px;" placeholder="Price" />
            </div>

守则问题：

如果我在一个字段中输入值并单击我不想要的添加，它也会克隆该值。
在价格字段中，我想输入价格值，它应该立即在div框中计算，我将在稍后定义。如果我点击删除，应立即扣除金额

谢谢

Answer 1

1）克隆后，将值设置为空：

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).val('');

或

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);
newElem.val('').attr('value', '');

但是，克隆不应该复制该值，如jQuery API中所述：

表单元素的动态状态（例如，键入输入的用户数据，以及textarea或用户对select的选择）不会复制到克隆元素。

至于（2），你没有提供足够的信息。请发布总结价格字段的代码和“div”框HTML。

如果还没有，首先，添加一个ID为的div框：

<div id="answer">0</div>

接下来，添加此JavaScript代码：

function recalculateTotal() {
    var total = 0;
    $('input[placeholder=price]').each(function() {
        total += parseFloat($(this).val());
    };
    $('#answer').text(total);
}
$(function() {
    $('body').on('keyup', 'input[placeholder=price]', recalculateTotal);
});

并将其添加到函数rmForm的最后一行：

recalculateTotal();

使用jquery和计算字段值的动态文本字段

1 个答案: