jQuery ON KEYUP 动态添加第二行文本字段但在第二行无法添加第三行答案

【问题标题】：jQuery ON KEYUP dynamically adds the second line of text fields but does not work on second line to add the third linejQuery ON KEYUP 动态添加第二行文本字段但在第二行无法添加第三行
【发布时间】：2014-12-16 23:42:28
【问题描述】：

大家好，我是 jQuery 跳跃的新手，我会在这里获得帮助。

我有一行 4 个文本字段。一旦用户开始输入第 4 个文本字段（行上的最后一个文本字段）我监听 jQuery KEYUP 并生成第二行的 4 个文本字段。然后一旦用户开始在第二行文本字段上输入并到达最后一个文本字段（这是我被卡住的地方:)）jQuery KEYUP 必须生成第三行，而第三行不会。

为了尝试对我的代码进行故障排除，我在 keyup 上设置了警报，以查看第 4 个文本字段生成的 keyup 事件是否让我成为正确的 PARENT，我将使用 AFTER() 添加我的另一行从警报中我可以看到我得到了正确的父母。

有什么建议吗？

这是我正在使用的代码。

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="js/jquery-2.1.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){

var NewInvoiceLine = $('<div id="InvoiceLine"><div class="ItemFields" id="ItemQuantity"> <input id="Quantity" name="Quantity" type="text"></div><div class="ItemFields" id="ItemDescription"> <input id="Description" name="Description" type="text"></div><div class="ItemFields" id="ItemPrice"> <input id="Price" name="Price" type="text"></div><div id="ItemTotalPrice"><input id="TotalPrice" name="TotalPrice" type="text"></div></div>')

                $('#Invoice').on('keyup','#TotalPrice',function(event){
                    event.preventDefault();
                    alert($(this).first().parent().parent().attr('id'));
                    $(this).first().parent().parent().after(NewInvoiceLine);
                    });
                });
</SCRIPT>
<style type="text/css">
.ItemFields{float:left;}
</style>
</head>

<body>
<form name="form1" method="get" action="">
<div id="Invoice">
<div id="InvoiceLine1">
  <div class="ItemFields" id="ItemQuantity"> <input id="Quantity" name="Quantity" type="text"></div>
  <div class="ItemFields" id="ItemDescription"> <input id="Description" name="Description" type="text"></div>
  <div class="ItemFields" id="ItemPrice"> <input id="Price" name="Price" type="text"></div>
  <div                    id="ItemTotalPrice"><input id="TotalPrice" name="TotalPrice" type="text"></div>
</div>

<div id="InvoiceButtons">
  <div id="Submit"><input name="Submit" type="submit" value="Submit"></div>
  <div id="Draft"><input name="Draft" type="submit" id="Draft" value="Draft"></div>
</div>
</div>
</form>
</body>
</html>

【问题讨论】：

您好，欢迎来到社区。您能提供更多详细信息并让您的问题更清楚吗？
感谢 OnlyMAJ。我已经改变了我的文字希望这很清楚。
#TotalPrice 选择器只会为它看到的第一个带有 id TotalPrice 的元素注册 keyup 事件，而不是你正在生成的新元素。为 TotalPrice 输入分配一个类并在 jquery 选择器中为 keyup 事件引用它可能是一种解决方案。
感谢阿兰的评论。我试过了 :) 我试过到处搜索我确定我不是第一个遇到这个问题的人$('#Invoice').on('keyup',".TotalPrice" 但仍然和以前一样。

标签： jquery onkeyup

【解决方案1】：

我认为这个版本更好，也可以在服务器端工作......

此外，您不必在代码中编写重复的 html，因此您也可以轻松更新 html，因为它正在动态读取 html（第一行）：

var InvoiceLine = $('#Invoice .InvoiceLine').eq(0).html();
$('#Invoice').on("keyup", ".ItemFields:last input", function() {
    if ($(this).val() != "") $('#Invoice .InvoiceLine').last().after('<div class="InvoiceLine">'+InvoiceLine+"</div>");
});

现场演示：http://jsfiddle.net/zys4p4rh/2/

【讨论】：

但是请等待我的回答，因为 IMO 它比 Parody 的要好一点...
是的，这很酷 :) 实际上，这是我下一步要了解如何获取“InvoiceLine”的 HTML 并再次复制它，而不是将所有 HTML 放入我的 javascript 然后将其添加到我的页面。
在您的代码中很高兴知道一些事情。 1：为什么名字里有[]？
那是在提交时获取所有输入。 Othwerwise，我认为，只有最后的输入才会计算在内，因为相同形式的名称应该像 id - 唯一的。有了那个 [] ，它就变成了一个包含所有输入的数组......
你有什么问题吗？什么不工作？

【解决方案2】：

给你，我想这就是你想要的。

$(document).ready(function(){

    var NewInvoiceLine = '<div class="InvoiceLine"><div class="ItemFields" id="ItemQuantity"> <input id="Quantity" name="Quantity" type="text"></div><div class="ItemFields" id="ItemDescription"> <input id="Description" name="Description" type="text"></div><div class="ItemFields" id="ItemPrice"> <input id="Price" name="Price" type="text"></div><div class="ItemFields" id="ItemTotalPrice"><input id="TotalPrice" name="TotalPrice" type="text"></div></div>';

    $('form').on('keyup','.ItemFields:last-child',function(){
        var a = $(this).parents(".InvoiceLine").next(".InvoiceLine");
        if(a.length > 0){
            return false;
        }else{   
            $(this).closest(".InvoiceLine").after(NewInvoiceLine);
        }

    });
});

通过将div 与id 的InvoiceLine 更改为div 与class InvoiceLine，您不会遇到多个元素具有相同id 的问题。

然后你就可以像我在上面的函数中一样使用它来获得我认为你想要的效果。

这是一个JSFIDDLE 展示它的实际应用

【讨论】：

是的，这就是我要照顾的 :)。我总是必须使用类吗？我猜在 html 中有几个相同的 ID 会导致问题？
是的，ids 应该是唯一的，如果您希望有多个元素使用相同的 css 或用于类似上述函数的函数中，请使用类和 np。