Question

可能重复：
Call same function by a cloned list row

我正在尝试进行简单的计算。

我有以下运行：

基本上，它现在的工作方式是：当您在下拉列表中选择一个选项时，它将根据所选的选项显示内容。然后，当您再次选择相同的选项时，它将添加，基本上克隆相同的行。现在，当选择第二个选项“Option2”时，它将显示一个空文本框。输入数字时，它将或应该调用我们进行基本计算的函数。该功能已在脚本中。

但是，当我们有两个空文本框时，它应调用相同的计算函数，但单独计算并将其放在不同的div中。我们显示金额的div＃被称为“金额”

基本上，它应该像这样工作：

First Empty textbox -> 100 -> 100 * 22.38 = display result in div#1
Second Empty textbox -> 230 -> 230 * 22.38 = display in div#2

关于如何实现这一目标的任何想法？

Answer 1

克隆元素时，也会克隆id。最佳做法是为克隆元素创建新ID，这也有助于完成您想要的任务。 name属性也是如此。

通过对代码http://jsfiddle.net/dNQVQ/3/进行一些修改，我就能得到您所追求的内容。首先我要说这可能不是理想的方式，但这是一个开始。就像我之前说的那样，关键是要为克隆元素设置唯一的ID。我在这个例子中所做的是使用索引作为列表元素id的一部分，该元素使用“amount”div中的匹配索引进行克隆。这样，当输入更新时，检索索引，然后用于更新相应的div。另外，我将执行计算和更新的函数移动到settimeout调用中的匿名函数。这样可以很容易地在函数调用中使用对更新输入的引用。

Answer 2

在这里很晚才加入聚会:)这是一个vernon：http://jsfiddle.net/KVPwm/

另外，如果它的任务是布鲁夫，那么就放一个作业homework标签！

SO社区的人都是很棒的人，所以说实话，伙计们会帮助人！

使用.on代替live - 推荐。即如果热衷于阅读，请升级您的JQ来源 - What's wrong with the jQuery live method?
你有2个document.ready函数还我为你锁定了一些东西。
同时考虑使用isNan检查。
休息你可以阅读代码并玩一下以使其更简洁。
我添加了2 divs并使用id号码相应地填充了这些内容。

这应符合原因:)

<强>码

$("document").ready(function() {
    /////////////////////////////////CALUCATIONS/////////////////////////////////
    //setup before functions
    var typingTimer; //timer identifier
    var doneTypingInterval = 0; //time in ms, 5 second for example
    $('input[name=Input2], input[name=Input1]').live('keyup', function() {
        var str = $(this).prop("id");
        var pattern = /[0-9]+/g;
        var matches = str.match(pattern);

        amount = parseFloat($(this).val()) * 22.38;
        typingTimer = setTimeout(doneTyping(matches), doneTypingInterval);
    });

    $('#Input2').keydown(function() {
        clearTimeout(typingTimer);
    });

    function doneTyping(matches) {
        $('#amount'+matches).text(amount.toFixed(2) + " lbs");
    }
    $("#List-Option1,#List-Option2").hide();

    $('#category').change(function() {
        var str = $('#category').val();
        if (str == 'Option1') {
            var option1 = $("#List-Option1:first").clone().show();
            $('#box li:last').after(option1);
        }

        if (str == 'Option2') {
            var option2 = $("#List-Option2:first").clone().show();
            $('#box li:last').after(option2);

        }

    });
});

克隆行请求相同的功能

2 个答案: