唯一ID和动态添加的项目的棘手情况

Tricky situation with unique ID's and dynamically added items

本文关键字:项目 情况 添加 ID 动态 唯一      更新时间:2023-09-26

我有一个按钮,单击该按钮时会将新的媒体项添加到列表中。我遇到的问题是它使用重复的唯一 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' 作为委托事件的祖先,因为它具有与样式相关的错误,这意味着某些事件可能永远不会发生。

相关文章: