Erhalten einer ID von einer Schaltfläche in ein Bootstrap-Modal

Question

Ich habe es geschafft, herauszufinden, wie Sie externe Json greifen und verwenden Sie das in einem Modal mit einer manuell festgelegten ID im Javascript.

Ich bin auf der Weitergabe der ID von der Schaltfläche an die JavaScript-URL fest. Mein Button Markup ist wie folgt;

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

Meine JS sieht derzeit so aus;

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

die Linie, die Problem mit hat;

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

Ich verwende ($ (this) .data ('id')); versuche, das ID-Attribut von der Schaltfläche zu holen, aber ich werde immer undefiniert.

Answer 1

Versuchen

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

$ (this) mit dem tr zeigen, die geklickt wurde.

Answer 2

Ändern Sie die Zeile zu

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

und versuchen Sie es erneut

Answer 3

versuchen, es zu holen, wie unten

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