獨特的ID和動態添加項目的棘手的情況

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（或任何你想將它命名）

增量刪除字段時添加字段，減量時偏移

然後，將其添加到ID聲明一個全局JavaScript變量創建時一個新的字段 - 它們將被命名爲：

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