唯一ID和动态添加的项目的棘手情况
Tricky situation with unique ID's and dynamically added items
我有一个按钮,单击该按钮时会将新的媒体项添加到列表中。我遇到的问题是它使用重复的唯一 id。我需要一种方法来让它在 id 上添加某种匿名号码,这样它就不会重复。或者我可以使用一个类和某种 .each.最接近的方法将其绑定到正确的按钮?
#replaceFeUpload 和 #replaceFileSelectUpload 是添加媒体项时重复的 ID。
.HTML
<div class="add-carousel-item">
<div class="col-md-2">
<input type="file" class="fileElem pull-right" id="replaceFeUpload" multiple onchange="handleFiles(this.files)">
<button class="fileSelect pull-right" id="replaceFileSelectUpload">Select Media Item</button>
</div>
<div class="col-md-2">
<button class="fileSelect">submit</button>
<button class="btn btn-danger left-space remove-item">Remove</button>
</div>
</div>
杰奎里
$("p.add-carousel-item").on("click", function () {
$.get("/includes/add-carousel-item", function(response) {
$( ".carousel-item-zone" ).append(response);
});
function click(el) {
// Simulate click on the element.
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
el.dispatchEvent(evt);
}
document.querySelector('#replaceFileSelectUpload').addEventListener('click', function (e) {
var fileInput = document.querySelector('#replacefeUpload');
//click(fileInput); // Simulate the click with a custom event.
fileInput.click(); // Or, use the native click() of the file input.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#replacefeUpload").change(function () {
readURL(this);
});
}, false);
});
保留一个名为 offset
的全局 JavaScript 变量(或任何你想命名的变量(
添加字段时递增偏移量,删除字段时递减
偏移量然后,在创建新字段时将其添加到 id 声明中 - 它们将被命名为:
offset = 1;
"fieldName" + offset++ //fieldName1
"fieldName" + offset++ //fieldName2
"fieldName" + offset++ //fieldName3
来自注释:使用类或 data-something 属性来存储值。您不能在动态内容上使用重复的 ID。
使用以相对方式查找相关元素的代码:
var fileInput = $(this).closest('.add-carousel-item').find('.replacefeUpload');
这会在祖先中查找最近的轮播项目,然后找到匹配的上传元素。
作为使用委托事件处理程序使用类筛选器的示例:
目录:
<div class="add-carousel-item">
<div class="col-md-2">
<input type="file" class="fileElem pull-right replaceFeUpload" multiple onchange="handleFiles(this.files)">
<button class="fileSelect pull-right replaceFileSelectUpload">Select Media Item</button>
</div>
<div class="col-md-2">
<button class="fileSelect">submit</button>
<button class="btn btn-danger left-space remove-item">Remove</button>
</div>
</div>
j查询:
$(document).on('click', '.replaceFileSelectUpload', function (e) {
var fileInput = $(this).closest('.add-carousel-item').find('.replacefeUpload');
//click(fileInput); // Simulate the click with a custom event.
fileInput.click(); // Or, use the native click() of the file input.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).on('change, ".replacefeUpload", function () {
readURL(this);
});
委托事件处理程序的工作原理是侦听一个方便的不变祖先(如果您手边没有祖先,则默认为document
(,然后应用 jQuery 选择器,然后将函数应用于导致事件的任何匹配元素。注意:切勿使用 'body'
作为委托事件的祖先,因为它具有与样式相关的错误,这意味着某些事件可能永远不会发生。
相关文章:
- 正在将数据主题添加到所有项目
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- Netsuite Suitelet:在不达到治理限制的情况下,遍历事务行项目的列表加载和提交记录
- 如何在没有2个项目的情况下更改菜单项href
- 在不向上滚动的情况下向列表框中添加项目
- AngularJs/GitHub :如何在没有任何历史记录的情况下将角度种子克隆到我的新项目中
- 如何在没有缓存/cookie的情况下运行/调试Web应用程序项目
- 在没有JQuery的情况下将JSON数据获取到TVML项目中
- Sublime Text - 在不刷新 Eclipse 项目的情况下在 apache tomcat 上运行项目
- 如何在不获取所有项目的情况下获取特定内容类型的列表项的计数
- 尝试在考虑所选Javascript数量的情况下计算项目的总价
- 如何在不影响其他项目的情况下操作一组列表组项目
- 在不删除未列出项目的情况下,将多个源的映射删除到单个列表中
- 如何在Asp.Net中不按CTRL键的情况下在ListBox中多选项目
- 唯一ID和动态添加的项目的棘手情况
- 如何在没有jquery的情况下通过属性选择项目
- 光线如何?项目在没有CSS位置或margin-top的情况下上下移动
- JUMflot如何重新绘制点/选择项目?尝试将项添加到数组中并在不影响原始项的情况下重新绘制它们
- 如何从browserify/babelify导出全局变量,以便在没有browserfy的情况下在项目中使用
- 模块化一个AngularJS应用后,如何在不需要输入大量脚本的情况下将整个项目包含在index.html中?标签