Question

我有一个按钮，单击该按钮会将新媒体项添加到列表中。我遇到的问题是它使用了重复的唯一ID。我需要一种方法来让它在id上添加某种匿名号码，这样它就不会重复了。或者我可以使用类和某种.each.closest方法将它绑定到右键吗？

#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>

JQuery的

$("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);
    });

Answer 1

来自评论：使用类或数据 - 某些属性来存储值。您无法在动态内容上使用重复的ID。

使用以相对方式查找相关元素的代码：

var fileInput = $(this).closest('.add-carousel-item').find('.replacefeUpload');

这会查找最近轮播项目的祖先，然后找到匹配的上传元素。

作为使用类过滤器使用委托事件处理程序的示例：

<强> HTML

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

<强> jQuery的：

$(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'作为委托事件的祖先，因为它存在与样式相关的错误，这些错误意味着某些事件可能永远不会发生。

Answer 2

保留一个名为offset的全局JavaScript变量（或任何您想要命名的变量）

添加字段时增加偏移量，删除字段时减少

然后，在创建新字段时将其添加到id声明中 - 它们将命名为：

offset = 1;
"fieldName" + offset++ //fieldName1
"fieldName" + offset++ //fieldName2
"fieldName" + offset++ //fieldName3

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

2 个答案: