Wenn ich ein MySQL-Array durchlaufe, arbeitet JavaScript mit den ersten widerholten Daten.

Question

Ich habe Probleme, ein gewünschtes Ergebnis für meinen Code zu erhalten. Wenn ich ein Array von Daten durchlaufe, arbeitet JavaScript nur mit den ersten widerholten Daten.

Code Snippet:

 <?php 

        $ids = array(); 


        array_push($ids, getRandom($id)); 
        array_push($ids, getRandom($id)); 
        array_push($ids, getRandom($id)); 

        $ids = array_unique($ids); 
        if (count($ids) > 0) { 
        foreach($ids as $value => $val) { 

         //data saved in variables 


         <li> 
          <div class="row"> 
           <div class="col-xs-3"> 
            <div class="avatar"> 
             <!--avartar --> 
            </div> 
           </div> 
           <div class="col-xs-6"> 
            <!-- data --> 
           </div> 
           <div class="col-xs-3 text-right"> 
            <button id = "button1" class="btn btn-xs btn-warning btn-icon"><i class="fa fa-plus"></i></button> 
           </div> 
          </div> 
         </li> 
         <?php 
         } 
        } 
        ?> 

JavaScript:

<script> 
       $("#button1").on("click",function() { 
        alert("hey"); 
       }); 
</script> 

Answer 1

Versuchen Sie, die JavaScript-Funktion zu ändern für jede Schaltfläche klicken arbeiten:

$("button").on("click",function() { 
    alert("hey"); 
}); 

Und es ist auch erwähnenswert, Sie sollte nicht dieselbe ID für mehr als ein Element verwenden:

// www:

<button id = "button_<?= $val ?>" class="btn btn-xs btn-warning btn-icon"><i class="fa fa-plus"></i></button> 

Dies wird eine eindeutige ID für jede Schaltfläche Element

Answer 2

ids sollte eindeutig sein, versuchen Sie stattdessen eine Klasse.

Die meisten Browser bei der Auswahl der ID in Javascript respektieren den Standard und reagieren nur mit dem ersten Element.

Versuchen Sie, die ID

<div class="col-xs-3 text-right"> 
    <button class="btn btn-xs btn-warning btn-icon"><i class="fa fa-plus"></i></button> 
</div> 

zu entfernen und dann:

$(".btn").on("click",function() { 
    alert("hey"); 
});