为什么克隆只克隆一次项目
Why is clone only cloning item once?
我是jquery的新手,我100%确信我犯了一个逻辑错误,但我看不到。基本上,当用户在字段中键入项目时,我想克隆字段,以便他们可以继续添加更多信息。在我正在研究的例子中,我试图创建一个兄弟姐妹及其年龄的列表。
这是我的代码:
$(document).ready(function () {
$("input[name='age']").on('keydown', function() {
//is it the last input?
if (this == $("input[name='age']:last", this.form)[0]) {
//insert an empty clone of the current input
//$(this).after($(this).clone(true).val(''));
$('.family').clone().insertAfter(".family");
}
这是html:
<form>
<div class="family">
<input name="age" value=0> <input name="sibling" value="name?">
<hr />
</div>
</form>
如果我使用$(this).after($(this).clone(true).val(''));
,那么它可以工作,但它只克隆一个字段(年龄字段),所以我试图用$('.family').clone().insertAfter(".family");
替换它来克隆div类,但它仅克隆字段一次。如果我开始输入我的第一个兄弟姐妹的信息,那么第二个表格就会出现,但如果我开始在第二个表单上输入,那么之后就不会出现新的信息。
这只是一个猜测,但我认为if语句不匹配,因此没有创建克隆(我是新手,所以这个想法可能是错误的)。如果是这种情况,那么我会感到困惑,因为我正在克隆输入字段的相同名称,因此input[name='age']:last
应该与最后一个年龄字段匹配。。不确定。
知道我做错了什么吗?
您必须让keydown
事件处理程序也注意到未来的元素(即您正在克隆和插入的新<div>
元素)。
更改
$("input[name='age']").on('keydown', function() {
至
$('form').on('keydown', 'input[name="age"]', function () {
即(也有一些修正/优化)
$('form').on('keydown', 'input[name="age"]:last-child', function() {
var _p = $(this).parent('.family');
// insert an empty clone of the current input's containing div
// ADDED : ... after the current input's containing div
_p.clone().insertAfter(_p);
}
试试这个:
$("form").on('keydown',"input[name='age']:last", function() {
$('.family:last').clone().insertAfter(".family:last");
})
jsFiddle示例
问题是您试图绑定到尚不存在的元素。要使用.on()实现这一点,您只需要绑定到dom中存在的元素:
事件处理程序仅绑定到当前选定的元素;他们必须在代码调用.on()时存在于页面上。为确保元素存在并且可以选择,请执行事件中元素的文档就绪处理程序内部的绑定页面上的HTML标记。如果新的HTML正在被注入到页面中,选择元素并在生成新HTML后附加事件处理程序放置到页面中。或者,使用委派的事件附加事件处理程序,如下所述。
然后,您需要确保只检查和克隆最后一个div及其输入。请注意,当您克隆输入字段时,您需要更改名称,这样您就不会得到一堆使用相同名称的字段,或者使用像PHP这样的语言,您可以在名称后面附加[]
,PHP会将其解析为一个数组。
- 在上一次响应时隐藏Qualtrics项目-Javascript
- ng只重复添加项目一次
- 在angularjs中一次选择一个项目
- "搜索并销毁“;迭代不会'不要一次删除所有项目
- 为什么克隆只克隆一次项目
- 使弹性项目一次包装两个
- 如何只调用一次事件处理程序,而不是每次单击项目时调用事件处理程序
- Javascript 库,一次包含两个项目
- 我们可以使用 iscroller 一次滚动固定的 3 个列表项项目吗?
- 在 6 次迭代的步长中每三个项目更改一次
- 使用胡须.js一次循环访问一个测验项目
- AngularJS指令在ng-repeat中为每个项目设置不同的值,只重复一次
- 当指定为仅删除一次时,拼接会从数组中删除多个项目
- jQuery Tools 可滚动:屏幕上有 3 个项目,但一次滚动一个
- Jquery 可折叠式功能一次只能打开一个项目
- 选择项目并一次显示n篇文章
- 为什么我的循环只有一次循环,即使有3个项目
- 一次添加一个项目到“;推车”;在Django、Ajax和Jquery中使用复选框
- Angular JS:一次只切换一个项目
- ExtJS-3,Ext.grid.GridPanel,多行复选框:如何一次提交所有选中的项目