Javascript jquery.on（）函数不起作用_Javascript_Jquery

Javascript jquery.on（）函数不起作用

javascript jquery

Javascript jquery.on（）函数不起作用,javascript,jquery,Javascript,Jquery,我有3个字段：数量、费率、总金额。如果有任何一个键控数量或费率字段，则总额字段上显示金额。我还有一个添加按钮。若有人点击添加按钮，那个么新行和删除链接将动态创建。我的问题是，如果我键入quantity或rate字段，那么calculateSum（）函数将正常工作。假设我创建了两行，它的总数为100+（100+100）=300。如果我删除第一个，什么都不会改变。如果我删除最后一个，结果显示200。但正确的结果是100。请有人指出我在这里可能做错了什么？非常感谢。这是我的密码： <html&g

我有3个字段：数量、费率、总金额。如果有任何一个键控数量或费率字段，则总额字段上显示金额。我还有一个添加按钮。若有人点击添加按钮，那个么新行和删除链接将动态创建。我的问题是，如果我键入quantity或rate字段，那么calculateSum（）函数将正常工作。假设我创建了两行，它的总数为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>


发票联
$（文档）.ready（函数（）{
$（document）.on（“keyup”、“.qty、.rate”函数（）{
计算um（）；
});
$（document）.on（“click”，“.del”，function（）{
计算um（）；
});
});
函数calculateSum（）{
变量数量=[]；
$（“.qty”）。每个（函数（）{
var num=parseFloat（this.value）| 1；
推送数量（个）；
});
var率=[]；
$（“.rate”）。每个（函数（）{
var num=parseFloat（this.value）| 0；
推送速率（num）；
});
var合计=0；
$（'input[name=“total_amount[]”]）。每个（函数（i）{
var金额=数量[i].toFixed（2）*比率[i].toFixed（2）；
总数+=金额；
$（此）.val（金额）；
});
$（“小计”）。正文（总计）；
}
/*
此脚本与上面的JavaScript函数相同。
*/
var-ct=1；
函数new_link（）
{
ct++；
var div1=document.createElement（'div'）；
div1.id=ct；
//删除扩展表单元素的链接
var delLink=''；
div1.innerHTML=document.getElementById（'newlinktpl'）。innerHTML+delLink；
document.getElementById（'newlink'）.appendChild（div1）；
}
//函数删除新添加的元素集
函数delIt（eleId）
{
d=文件；
var ele=d.getElementById（eleId）；
var parentEle=d.getElementById（'newlink'）；
父母移除儿童（ele）；
}
桌子
{
边框：1px纯黑；
宽度：600px；
}
运输署
{
边框：1px纯黑；
填充物：5px 5px 5px；
}
量
比率
总金额
0

尝试使用此

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

使用

.bind（eventType[，eventData]，handler（eventObject））

尝试以下操作：

在.ready（）中：

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

    calculateSum();
});

// 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.

在新建链接中（）：

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

    calculateSum();
});

// 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.

//删除扩展表单元素的链接
var delLink=''；
//设置href=#并改为将ct设置为数据id。

我猜您的问题是您在标签的href中有删除的逻辑，但您将显示更新附加到单击事件。单击事件通常会在跟随链接之前触发，因此在完成删除之前会更新显示。您应该在单击事件中将这两个属性合并为一致的、不引人注目的JavaScript（将

ct

添加到链接数据集）。然后，您可以有一个单独的事件处理程序分派给这两个函数，或者让delete函数在完成时调用update函数

需要注意的是，即使使用现有代码，上面的最后一句话也应该是一个解决方案，但让事情更接近一致性/预期代码不会有什么坏处。

这里是我的2美分，我已经使用@Mario和@mattwipple建议重写了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>


发票联
var templateText=\
\
\
\
\
\
';
var-ct=1；
$（文档）.ready（函数（）{
$（文件）.on（“键控”、“.qty、.rate”、calculateSum）；
美元（文件）。在（“点击”，“删除”，删除）；
});
函数calculateSum（）{
var合计=0；
$（'#newlink table'）。每个（函数（即，e）{
var，该值=$（此值）；
var qty=parseFloat（即.find（'.qty'）.val（））| 1；
var rate=parseFloat（that.find（'.rate'）.val（））| 0；
var金额=待固定数量（2）*待固定比率（2）；
找到（'.total_amount'）.val（amount）；
总数+=金额；
});
$（“小计”）。正文（总计）；
}
函数addRow（）{
ct++；
var div1=$（templateText）；
第1部分属性（'id'，ct）
var delLink=$（''）.append（$（''）.data（“id”，ct））；
div1.append（delLink）.appendTo（'#newlink'）；
}
函数delIt（）{
$（'#'+$（this.data（“id”））.remove（）；
计算um（）；
}
量
比率
总金额
0

JQuery的

函数用于查找元素。为什么不像@Jubin的answar那样使用它呢？你说“calculateSum（）函数不起作用”是什么意思？函数是否未执行，或者代码是否中断或计算错误？为什么不在delIt（eleId）末尾调用calculateSum（）？（正如@mattwipple所建议的，

.bind

方法仅对现有元素有效。因此，这对动态添加的新元素（如在

new_link（）

方法中创建的新元素）不起作用。

bind

被弃用并替换为

on

。@rune没有弃用，它不再是“首选方法”…@nbrooks正确，因为弃用的jquery参数是其中之一“不受欢迎的功能”区别其实并没有那么大：）删除部分不起作用，任何动态添加了类数量或速率的元素在完成后都不会附加keyup处理程序