Функция из того же класса динамического списка

Question

Я работаю со списком элементов, и мне нужно установить функцию, когда нажимается кнопка. Список заполняется динамически из сценария php, проблема в том, что когда я нажимаю на кнопку, первая запись в порядке, (отображает правильную информацию), а остальные отображают информацию из первого элемента.

<div class="col-lg-12"> 
<table class="table"> 
<thead> 
    <th> 
    Nombre Local 
    </th> 
    <th> 
    Direccion 
    </th> 
    <th> 
    Hora de cierre 
    </th> 
    <th> 
    Informacion 
    </th> 
</thead> 
<tbody> 
<?php foreach($list as $item){ 
    echo '<tr>'; 
    echo '<td>'.$item['name'].'</td>'; 
    echo '<td>'.$item['addr'].'</td>'; 
    echo '<td>'.$item['closing'].'</td>'; 
    echo '<td><button class="btn btn-data detalle" data-id="'.$item['id'].'" data-tipo="'.$item['tipo'].'" onclick="GetLocalesMain()"</td>'; 
    echo '</tr>'; 
    '};?> 
</tbody> 
</table> 
</div> 

JS

function GetLocalesMain(){ 
    var informacion = $(".detalle"); 
    var id = informacion.data('id'); 
    var tipo = informacion.data('tipo'); 

    console.log(id); 
    console.log(tipo); 
    $.ajax({ 
    url: '../functions/procesa.php?item=' + id + '&tipo=' + tipo, 
    type: 'POST', 
    dataType: 'json', 
    data: {}, 
    complete: function (xhr, textStatus){ 
    }, 
    success: function(data, textStatus, xhr){ 
    console.log('json', data); 
    $(data).each(function(a){ 
     muestraData(this); 
    }); 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
    } 
    }); 
} 

Answer 1

Вопрос заключается в том, что вы получаете все экземпляры ".detalle" например var informacion = $(".detalle");, но вам нужно настроить таргетинг на элемент, нажатый, вы можете сделать это довольно просто, используя jquery (поскольку вы все равно используете его).

Вы можете удалить onclick="GetLocalesMain()" в вашем HTML и в яваскрипта месте содержимое вашей GetLocalesMain функции внутри следующей функции JQuery клик:

$(".detalle").click(function() { 
    // function contents goes here 
}); 

Затем замените var informacion = $(".detalle"); с var informacion = $(this);

Теперь вы должны получить щелкнув элемент, а затем нужные данные.