Foreach Elemente - nur das erste Element funktioniert

Question

Ich benutze Laravel mit Blade und ich bekomme Daten aus der Datenbank mit einer Foreach in Sicht einfügen. Jedes Element hat eine ID, die ein Popup anzeigt, aber nur für das erste Element funktioniert und ich verstehe nicht warum. Auch wenn der erste Klick im dritten Element ist, ist zum Beispiel entweder. funktioniert nur auf dem ersten Element.

Die Daten zeigen korrekt, das Problem ist nur mit jquery klicken.

Mein jquery:

function getEditFolder(){ 
$("#edit-folder").click(function(e) 
{ 
    alert("edit folder"); 
    var linkPopup = $(this).attr('data-popup'); 
    $.get(linkPopup, function(response) 
    { 
     $(".opacity").css("display","block"); 
     $(".popup").css("display","block"); 
     $('.popup').html(response); 
     componentHandler.upgradeDom(); 
     $(".popup-close i").click(function() 
     { 
     $(".popup .mdl-card").remove(); 
     $(".popup").css("display","none"); 
     $(".opacity").css("display","none"); 
     }); 
    }); 
    e.preventDefault(); 
});} 

meiner Sicht:

<div id="slide"> 
@foreach ($groups as $group) 
    <div class="folder" data-history="{{$group->historico}}" data-dir="{{$group->directoria}}"> 
    <div class="folder-icon-name"> 
     <div class="folder-icon"> 
     <i class="material-icons md-24">folder</i> 
     </div> 
     <div class="folder-op"> 
     <div class="update-icon"> 
      <i id="edit-folder" class="material-icons" data-popup="app/edit-folder">mode_edit</i> 
     </div> 
     <div class="download-icon"> 
      <i class="material-icons">cloud_download</i> 
     </div> 
     <div class="remove-icon"> 
      <i id="remove-folder" class="material-icons" data-popup="app/remove-folder">delete</i> 
     </div> 
     </div> 
     <div class="folder-name"> 
     <span>{{$group->grupo}}</span> 
     </div> 
    </div> 
    </div> 
@endforeach</div> 

LÖSUNG: Die ID eindeutig ist, so habe ich Klasse.

Dankten

Answer 1

In dieser Situation müssen Sie anstelle einer ID, eine Klasse verwenden. Eine ID kann nur einem einzelnen Element zugewiesen werden, sodass jQuery das erste gefundene Element abgleicht und dann stoppt.

Wenn Sie eine Klasse verwenden, können Sie die gleiche Aktion für jede Instanz der Schaltfläche verwenden.

<i class="material-icons edit-folder" data-popup="app/edit-folder">mode_edit</i> 

und die JS:

function getEditFolder(){ 
$(".edit-folder").click(function(e) 
{ 
    alert("edit folder"); 
    var linkPopup = $(this).attr('data-popup'); 
    $.get(linkPopup, function(response) 
    { 
     $(".opacity").css("display","block"); 
     $(".popup").css("display","block"); 
     $('.popup').html(response); 
     componentHandler.upgradeDom(); 
     $(".popup-close i").click(function() 
     { 
     $(".popup .mdl-card").remove(); 
     $(".popup").css("display","none"); 
     $(".opacity").css("display","none"); 
     }); 
    }); 
    e.preventDefault(); 
});}