onkeyup - to动态添加第二行文本字段,但在第二行中不能添加第三行

  显示原文与译文双语对照的内容
0 0

我是 jQuery hopping我将在这里获得帮助。

我有一行 4个文本字段。 一旦用户在 4th 文本字段( 行的最后一个文本字段) 中开始键入,我听of并生成第 4行文本字段。 然后用户输入第二行文本字段并到达最后一个文本字段( 这就是我被困住的地方:) ) 时,jQuery必须生成第三行,而第三行不。

to我已经设置了 AFTER(),然后我可以看到 4th 文本字段generated我得到了正确的父类,我将使用来添加我的其他行。

任何建议?

下面是我使用的代码。


<%@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>

时间: 原作者:

0 0

我想这就是你的目的。


$(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 中,通过将和 class InvoiceLine转换为 div,你不需要有多个元素具有相同的id,从而实现了一个。

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

下面是一个 JSFIDDLE的例子,展示它

原作者:
0 0

我认为这个版本更好,也将工作的服务器端。

这里外,你不必在代码中编写复制 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/

...