Question

我试图在文本框中总结值并将总和放在span标记中。我的功能正常（有点......）。我的问题是“KEYUP”事件不适用于在页面加载后添加的表单元素。

例如，当页面呈现时，它会显示一个输入框，用户可以在其中输入数字。有一个“添加”链接将克隆具有INPUT框的链接，从而允许用户添加他们想要的任意数量的元素。我正在使用class属性将所有输入框绑定在一起，因此我可以使用jqueries .each（）对它们求和。

这是代码正在做的事情。如果我动态添加3或文本框，则keyup事件仅在页面呈现时最初在页面上的第一个INPUT框中执行...但是当我在此框中键入值时，动态创建的输入框中的数字得到他们应该总结一下。所以，它有点工作，但是我希望从动态输入框中触发keyup事件。

我正在使用jqueries“.after（）”将元素添加到dom。

这是JQUERY代码：

$(document).ready(function() {

//ADD INCOME TOTALS
$('.'income_txt\').each(function() {


$(this).keyup(function(){calculateSum('income_total', 'income_txt');});
}); //end income totals

}); //end document ready

这是存储在.js文件中的函数

//CALCULATESUM function
function calculateSum(ele, classname) 
{
    var sum = 0;
    //iterate through each textboxes and add the values
    $("."+classname).each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    $("#"+ele).html(sum);

}

这是HTML MARKUP：

<input class="income_txt" type="text" name="income_value1" id="' . $property_id . '_income_value_id1" />

有关如何完成的任何想法？

感谢您的帮助。

Answer 1

当您克隆输入时，是否在呼叫中添加“true”？这也将克隆事件。

$('.myElement').clone(true);

Answer 2

每次动态添加新元素时，都需要为keyup事件注册：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('input:text').keyup(calculateSum);
        $('a').click(function() {
            var newElement = $('<input type="text" />');
            $('#container').append(newElement);
            newElement.keyup(calculateSum);
            return false;
        });
    }); 

    function calculateSum() {
        var sum = 0;
        $('input:text').each(function() {
            var value = $(this).val();
            if(!isNaN(value) && value.length !== 0) {
                sum += parseFloat(value);
            }
        });
        $('span#result').html(sum);
    }
    </script>
</head>
<body>
<div id="container">
    <input type="text" />
</div>
<span id="result"></span>
<a href="#">Add element</a>

</body>
</html>

Answer 3

您应该将jQuery live（）函数用于动态添加到DOM的元素

http://api.jquery.com/live/

jquery帮助运行keyup事件

3 个答案: