Uzyskiwanie identyfikatora z przycisku do modemu początkowego

Question

Udało mi się dowiedzieć, jak pobrać zewnętrzny json i użyć go w modalu, używając ręcznie ustawionego identyfikatora w javascript.

Utknąłem na przekazywaniu id od przycisku do adresu javascript. Mój znacznik przycisku jest następujący;

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

Moje JS wygląda obecnie tak;

<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> 

linia, w której występuje problem;

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

Używam ($ (this) .data ('id')); aby spróbować pobrać atrybut id z przycisku, ale wciąż się nie udaje.

Answer 1

Spróbuj

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

$ (this) jest skierowany do tr, który został kliknięty.

Answer 2

zmienić linię do

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

i spróbuj ponownie

Answer 3

Spróbuj sprowadzić go poniżej

$('#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'); 
    } 
});