Ottenere un ID da un pulsante in un modal bootstrap

Question

Sono riuscito a capire come catturare json esterno e usarlo in una modale usando un id impostato manualmente nel javascript.

Sono bloccato a passare l'id dal pulsante all'URL javascript. Il mio markup dei pulsanti è il seguente;

<button type="button" class="btn btn-primary btn-sm modal-btn" data-id="10">Details</button> 

Attualmente il mio JS è simile a questo;

<script type="application/javascript"> 
     $(document).ready(function() { 
var table = $('#example').DataTable({ 

    dom: 'T<"clear">lfrtip', 
    tableTools: { 
     "sRowSelect": "multi", 
     "aButtons": [ "select_all", "select_none" ], 
     "aoColumnDefs": [ 
      { "bVisible": false, "aTargets": [ 1 ] } 
     ] 
    } 
}); 


$('#example tbody').on('click', 'tr', function (e) { 

    if($(e.target).is('.modal-btn')){ 
     $('#fullDetails').modal('show'); 
      var event = "details.php?id=" + ($(this).data('id')); 
       $.getJSON(event, function(data) { 
        $(".modal-title").text(data.title); 
        $(".modal-audience").text(data.audience); 
        $(".modal-leader").text(data.leader); 
        $(".modal-date").text(data.date); 
        $(".modal-start_time").text(data.start_time); 
        $(".modal-end_time").text(data.end_time); 
        $(".modal-details").text(data.details); 
        $(".modal-venue").text(data.venue); 
        $(".modal-cost").text(data.cost); 
       }, "json"); 

    }else{ 
     $(this).toggleClass('selected'); 
    } 
}); 

$('#button').click(function() { 
    alert(table.rows('.selected').data().length +' row(s) selected'); 
}); 

}); </script> 

la riga in cui si è verificati è;

var event = "details.php?id=" + ($(this).data('id')); 

Sto usando ($ (questo) .data ('id')); per provare e ottenere l'attributo id dal pulsante, ma continuo a diventare indefinito.

Answer 1

Prova

var event = "details.php?id=" + ($(e.target).data('id')); 

$ (this) sta indicando al TR che è stato cliccato.

Answer 2

Modificare la linea per

var event = "details.php?id=" + $(e.target).data('id'); 

e riprovare

Answer 3

Prova a prenderlo come qui sotto

$('#example tbody').on('click', 'tr', function (e) { 
     var target = $(e.target);//Try this change 

    if(target.is('.modal-btn')){ //compare it this way 
     $('#fullDetails').modal('show'); 
      var event = "details.php?id=" + (target.data('id'));//fetch it like this 
       $.getJSON(event, function(data) { 
        $(".modal-title").text(data.title); 
        $(".modal-audience").text(data.audience); 
        $(".modal-leader").text(data.leader); 
        $(".modal-date").text(data.date); 
        $(".modal-start_time").text(data.start_time); 
        $(".modal-end_time").text(data.end_time); 
        $(".modal-details").text(data.details); 
        $(".modal-venue").text(data.venue); 
        $(".modal-cost").text(data.cost); 
       }, "json"); 

    }else{ 
     $(this).toggleClass('selected'); 
    } 
});