jquery .on（）函数不起作用

时间：2012-10-11 10:47:04

标签： javascript jquery

我有3个字段数量，费率，总金额。如果任何一个加号数量或费率字段，则金额将显示在总金额字段中。我还有一个添加按钮。如果有人点击添加按钮，则动态创建新行和删除链接。我的问题是如果我键入数量或费率字段，那么calculateSum（）函数正常工作。假设我创建了2行，它的总量为100+（100 + 100）= 300。如果我删除第一个没有任何改变。如果我删除最后一个，那么结果显示200.但正确的结果是100.请有人指出我在这里做错了什么？非常感谢。这是我的代码：

<html>
    <head>
        <title>Invoice</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
$(document).on("keyup",".qty, .rate",function(){
        calculateSum();
    });

$(document).on("click",".del",function(){
        calculateSum();
    });
      });

function calculateSum() {
    var qty = [];
    $(".qty").each(function() {
            var num = parseFloat(this.value) || 1;
            qty.push(num);
    });

    var rate = [];
    $(".rate").each(function() {
            var num = parseFloat(this.value) || 0;
            rate.push(num);
    });
    var total = 0;
    $('input[name="total_amount[]"]').each(function(i){
        var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
        total += amount;
        $(this).val(amount);
    });
    $("#sub_total").text(total);
}
</script>
<script type="text/javascript" language='javascript'>
/*
This script is identical to the above JavaScript function.
*/
var ct = 1;

function new_link()
{
    ct++;
    var div1 = document.createElement('div');
    div1.id = ct;

    // link to delete extended form elements
    var delLink = '<div  style="text-align:right;margin-top:-20px"><a class="del" href="javascript:delIt('+ ct +')">Delete</a></div>';

    div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;

    document.getElementById('newlink').appendChild(div1);

}
// function to delete the newly added set of elements
function delIt(eleId)
{
    d = document;

    var ele = d.getElementById(eleId);

    var parentEle = d.getElementById('newlink');

    parentEle.removeChild(ele);

}
</script>
        <style type="text/css">
table
{
    border: 1px solid black;
    width: 600px;
}


td
{
    border: 1px solid black;
    padding:5px 5px 5px 5px;
}

        </style>
    </head>
    <body>
        <div id="newlink">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Quantity</td>
                <td>Rate</td>
                <td>Total Amount</td>
            </tr>

             <tr>
                 <td><input class='qty' type='text' name='qty[]'/></td>
                <td><input class='rate' type='text' name='rate[]'/></td>
               <td><input class='total_amount' type='text' name='total_amount[]'/></td>
            </tr>

                 </table>
    </div>
        <div id="sub_total">0</div>
        <input type="button" value="Add" onclick="new_link()"/>

                <div id="newlinktpl" style="display:none">
        <table cellpadding="0" cellspacing="0">
          <tr>
                 <td><input class='qty' type='text' name='qty[]'/></td>
                <td><input class='rate' type='text' name='rate[]'/></td>
               <td><input class='total_amount' type='text' name='total_amount[]'/></td>
            </tr>
                 </table>
    </div>
    </body>
</html>

5 个答案:

答案 0 :(得分：2)

试试这个：

在 .ready（）：

$(document).on("click",".del", function() {
    // Call delIt before calculateSum() and get id from data attribute.
    delIt($(this).data("id")) 

    calculateSum();
});
new_link（）：

中的

// link to delete extended form elements
var delLink = '<div style="text-align:right;margin-top:-20px"><a class="del" href="#" data-id=' + ct + '>Delete</a></div>';
// Set href = # and set ct to data-id instead.

答案 1 :(得分：1)

我猜你的问题是你在标签的href中有删除的逻辑，但是你将显示更新附加到click事件。在跟踪链接之前，通常会触发click事件，因此在删除完成之前显示正在更新。您应该在click事件中将这两者合并为一致的不显眼的JavaScript（将ct添加到链接数据集）。然后你可以有一个单独的事件处理程序调度到这两个函数，或者让delete函数在完成时调用更新函数。

请注意，即使使用现有代码，上面的最后一句也应该是一个解决方案，但是接近一致性/期望代码的事情也不会受到影响。

答案 2 :(得分：0)

尝试使用此

$(".qty, .rate").live("keyup",function(){
    calculateSum();
});

答案 3 :(得分：0)

这里是我的2美分，我使用@Mario和@MattWhipple建议重写了html。我还使用字符串变量删除了文档末尾不需要的额外元素。

我认为这不是更好的做事方式，但对我来说更清楚。

<html>
  <head>
    <title>Invoice</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      var templateText = '<div><table cellpadding="0" cellspacing="0">\
  <tr>\
    <td><input class="qty" type="text" name="qty[]"/></td>\
    <td><input class="rate" type="text" name="rate[]"/></td>\
    <td><input class="total_amount" type="text" name="total_amount[]"/></td>\
  </tr>\
</table></div>';
      var ct = 1;

      $(document).ready(function() {
        $(document).on("keyup", ".qty, .rate", calculateSum);
        $(document).on("click", ".del", delIt);
      });
      function calculateSum() {
        var total = 0;
        $('#newlink table').each(function(i, e) {
          var that = $(this);
          var qty = parseFloat(that.find('.qty').val()) || 1;
          var rate = parseFloat(that.find('.rate').val()) || 0;
          var amount = qty.toFixed(2)*rate.toFixed(2);
          that.find('.total_amount').val(amount);
          total += amount;
        });
        $("#sub_total").text(total);
      }
      function addRow() {
        ct++;
        var div1 = $(templateText);
        div1.attr('id', ct)
        var delLink = $('<div style="text-align:right;margin-top:-20px"> </div>').append($('<a class="del" href="#" >Delete</a>').data("id", ct));
        div1.append(delLink).appendTo('#newlink');
      }
      function delIt() {
        $('#' + $(this).data("id")).remove();
        calculateSum();
      }
    </script>
  </head>
  <body>
    <div id="newlink">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th>Quantity</th>
          <th>Rate</th>
          <th>Total Amount</th>
        </tr>
        <tr>
          <td><input class='qty' type='text' name='qty[]'/></td>
          <td><input class='rate' type='text' name='rate[]'/></td>
          <td><input class='total_amount' type='text' name='total_amount[]'/></td>
        </tr>
      </table>
    </div>
    <div id="sub_total">0</div>
    <input type="button" value="Add" onclick="addRow()"/>
  </body>
</html>

答案 4 :(得分：-2)

使用.bind( eventType [, eventData], handler(eventObject) )

相关问题
最新问题