Question

在处理动态生成的ID时遇到问题。我无法理解如何以jquery方式使用这些id。我有以下代码来计算总数

<html>
<head>
<script type="text/javascript" src="includes/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/jquery/recopy/reCopy.js"></script>
<script type="text/javascript">
$(function()
{ 
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">
Remove</a>';
$('a.add').relCopy({ append: removeLink}); });
</script>
<script type="text/javascript">
$(function()
{ 
$("input[id*='quantity']").keyup(function() 
{
        var totalSum = 0;
        $("input[id*='quantity']").each(function (){
        totalSum += parseFloat(this.value);
        });
    $("#grandtotal").val(totalSum);
});
});
</script>
</head>
<body>

<form action="#" method="post">
<div class="clone" style="width:800px;">
    Quantity(Q):<input type="text" name="quantity[]" id="quantity">
    Rate(R):<input type="text" name="rate[]" id="rate">
    Total Price(Q*R):<input type="text" name="total[]" id="total">
</div>
<div  style="width:700px;">
    <p style=" text-align:right;">
    Grand Total Price:
    <input type="text" name="grandtotal" id="grandtotal" style="float:right">
    </p>
</div>
</br>                
<a href="#" class="add" rel=".clone">Add More</a>    
</form>
</body>
</html>

请帮助我，在这方面，我没有得到每个价格ID的总数，然后总价格..

Answer 1

您需要使用事件委派。

http://api.jquery.com/on/

$(document).on('keyup', "input[id*='quantity']", function()  { ... }

Answer 2

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

即

$(document).on('event','selector',callback_function)

实施例

$(document).on('keyup', "input[id*='quantity']", function () {
    var totalSum = 0;
    $("input[id*='quantity']").each(function () {
        totalSum += parseFloat(this.value);
    });
    $("#grandtotal").val(totalSum);
});

代替document，您应该使用最近的静态容器。

修改

根据评论，您需要先计算总数，即（Q * R）。然后你必须计算总计。我已根据您的要求对变更率的关键字进行了操作。

$(document).on('keyup', "input[id*='rate']", function () {
    $(this).siblings('input[name="total\\[\\]"]').val(+$(this).val() * +$(this).siblings('input[name="quantity\\[\\]"]').val());

    var totalSum = 0;
    $('input[name="total\\[\\]"]').each(function () {
        totalSum += parseFloat(+$(this).val());
    });
    $("#grandtotal").val(totalSum);
});

DEMO

注意：因为我使用了name属性。因此逃脱[]。根据文档

使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为文字作为名称的一部分，必须使用两个反斜杠进行转义：\\。

重新考虑的代码

var removeLink = ' <a class="remove" href="#">Remove</a>';
$('a.add').relCopy({
    append: removeLink
});

$(document).on('keyup', "input[id*='rate']", function () {
    $(this).siblings('input[name="total\\[\\]"]').val(+$(this).val() * +$(this).siblings('input[name="quantity\\[\\]"]').val());
    calculateGrandTotal();
});

$(document).on('click', ".remove", function () {
    $(this).closest('.clone').slideUp(function () {
        $(this).remove();
        calculateGrandTotal();
    });

    return false;
});

function calculateGrandTotal() {
    var totalSum = 0;
    $('input[name="total\\[\\]"]').each(function () {
        totalSum += parseFloat(+$(this).val());
    });
    $("#grandtotal").val(totalSum);
};

Re-factored DEMO

Jquery动态id操作

2 个答案:

修改