克隆元素,但它们必须具有“唯一属性”
Clone elements but they must have "unique properties"
>演示
这是我到目前为止的设置:
我可以预览目标收件人的邮件。但是,我需要动态添加更多收件人的功能。我几乎已经完成了它的基本功能。
问题#1:我的问题是每当我添加新收件人时,keyup
不再适用于后续字段。
问题#2:另外,如何在克隆第一个div之前清除字段?还是我使用其他方法而不使用.clone()
?
问题#3:最后,如何使每个字段独一无二?请注意,在我的脚本文件和我使用的类中,它们都是相同的,因此我在第一个字段中输入的任何内容都将复制到所有预览中。
演示
首先,您必须使用 on() 事件委托,以便 keyup 适用于动态元素,并且要键入它的唯一文本,您必须使用 .closest() 找到sub_container
$(document).on('keyup', '.name', function (e) {
var input = $(this).val().replace(/['n]/g, '<br />');
$(this).closest('.sub_container').find('.preview_name').html(input);
});
$(document).on('keyup', '.message', function (e) {
var input = $(this).val().replace(/['n]/g, '<br />');
$(this).closest('.sub_container').find('.preview_message').html(input);
});
$('.add_new').click(function (e) {
//var container = $('.sub_container').html();
//$('.container').append(container);
$('.sub_container').first().clone().appendTo('.container').find('input').val('');
$('.preview_message').last().html('');
$('.preview_name').last().html('');
});
演示
您只需要添加.clone(true)
即可克隆附加到元素的事件侦听器。
$('.add_new').click(function(e) {
//var container = $('.sub_container').html();
//$('.container').append(container);
$('.sub_container').first().clone().appendTo('.container');
});
成为
$('.add_new').click(function(e) {
//var container = $('.sub_container').html();
//$('.container').append(container);
$('.sub_container').first().clone(true).appendTo('.container');
});
更新的小提琴。
.clone() 文档。
如果您添加 parent().parent(),它只会更新您当前正在编辑的表单元素旁边的预览区域:
http://jsfiddle.net/Z8MyX/3/
$('.name').keyup(function(e) {
var input = $(this).val().replace(/['n]/g,'<br />');
$('.preview_name').html(input);
});
$('.message').keyup(function(e) {
var input = $(this).val().replace(/['n]/g,'<br />');
$(this).parent().parent().find('.preview_message').html(input);
});
$('.add_new').click(function(e) {
//var container = $('.sub_container').html();
//$('.container').append(container);
$('.sub_container').first().clone(true).appendTo('.container');
});
事件委派
$(document).on('keyup', '.name', function (e) {
var input = $(this).val().replace(/['n]/g, '<br />');
$(this).closest('.sub_container').find('.preview_name').html(input);
});
$(document).on('keyup', '.message', function (e) {
var input = $(this).val().replace(/['n]/g, '<br />');
$(this).closest('.sub_container').find('.preview_message').html(input);
});
$(document).on('click', '.add_new', function (e) {
//var container = $('.sub_container').html();
//$('.container').append(container);
$('.sub_container').first().clone().appendTo('.container').find(':input').val('');
});
演示:小提琴
相关文章:
- ng重复中的ng模型-初始化唯一作用域属性
- JavaScript-用唯一属性标识对象
- “new”关键字是在构造对象时自动设置“constructor”属性的唯一方法吗
- Ember JS如何获取具有唯一属性值的数组
- 角度:当您需要“跟踪”但您没有唯一的属性可以跟踪时,您会怎么做
- 动态删除没有唯一属性的输入字段
- 基于单个属性从数组中获取唯一对象
- 使用jQuery隐藏具有非唯一属性的元素
- Knockout.js中使用的唯一ID;对于“;单选按钮组中的标签属性
- Backbone.js在permalink集合中所有模型的唯一属性名称
- 如何检查具有唯一值的相同属性的同一类
- 页面上第二个表单所需的唯一 id 属性
- Lodash Javascript 基于唯一属性值返回元素
- 基于两个属性从 javascript 中的对象数组中获取唯一数组
- 如何使用 Wolfpack.js 测试我的 Sails.js 模型的唯一电子邮件属性
- 克隆元素,但它们必须具有“唯一属性”
- 如何通过对象的唯一属性值从数组中获取对象
- 基于每个元素预先存在的唯一属性,复制/更改多个元素的属性
- 将唯一属性关联到JavaScript中的匿名函数
- 没有数.相对于对象数组中的另一个属性的唯一属性的出现