Öffnen Sie Modalbox mit generierten Schaltflächen

Question

Ich erstellte eine Tabelle mit Daten aus einem JSON und fügen Sie diese Tabelle mit einem Javascript-Funktionsschaltflächen.

Jetzt möchte ich mit dieser Schaltfläche generated Modalboxes mit verschiedenen Ausgaben öffnen (z. B. Hello world1 mit Taste 1, hello world2 mit Taste 2).

Gibt es eine Möglichkeit, dies zu lösen?

Mein Code:

$(document).ready(function() { 
 

 
    //JSON for table  
 
    var hotspots = "[{\"path\": \"src/main/java/tools/generator/data/RecordPart.java\",\"revisions\": 25,\"codeLines\": 18,\"authors\": [{\"name\": \"User1\",\"commits\": 7}]},{\"path\": \"src/main/java/tools/generator/data/RecordTotal.java\", \"revisions\": 55,\"codeLines\": 23,\"authors\": [{\"name\": \"User1\",\"commits\": 5}]},{\"path\": \"src/main/resources/test.xml\",\"revisions\": 102,\"codeLines\": 44,\"authors\": [{\"name\": \"User1\",\"commits\": 7}]},{\"path\": \"src/main/java/tools/generator/helper/MenuHelper.java\",\"revisions\": 4,\"codeLines\": 115,\"authors\": [{\"name\": \"User1\",\"commits\": 2}]}]"; 
 
      
 
     var jsonHotspots = JSON.parse(hotspots); 
 
     constructTable(jsonHotspots); 
 
    }); 
 

 

 
    // Table out of json 
 
    function constructTable(json) { 
 
     var tbl=$("<table/>").attr("id","mytable"); 
 
     $("#div1").append(tbl); 
 
     var tr="<tr>"; 
 
     var td1='<td onclick="sortTable(0)" >Path</td>'; 
 
     var td2='<td onclick="sortTable(1)" >Rev</td>'; 
 
     var td3='<td onclick="sortTable(2)" >Lines</td>'; 
 
     var td4='<td ></td></tr>'; 
 
     $("#mytable").append(tr+td1+td2+td3+td4); 
 
     for(var i=0;i < json.length ; i++) 
 
     { 
 
      var tr="<tr>"; 
 
      var td1="<td>"+json[i]["path"]+"</td>"; 
 
      var td2="<td>"+json[i]["revisions"]+"</td>"; 
 
      var td3="<td>"+json[i]["codeLines"]+"</td>"; 
 
      var td4='<td><button class="button" id="myBtn'+ i +'">Show<td></tr>'; 
 
      $("#mytable").append(tr+td1+td2+td3+td4); 
 
     } 
 
    } 
 
    
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<table id="mytable"></table>

Answer 1

können Sie verwenden element.querySelectorAll

auf den neuen Schaltflächen.

https://jsfiddle.net/zrdj703e/1/

document.querySelector('.button').addEventListener("click", myFunction); 

function myFunction() { 
    alert('clicked'); 
} 

EDIT: Ich sah jetzt, dass Sie Jquery verwenden, dann können Sie nur verwenden:

$('body').on('click','#mytable button',function({ 
    alert('button clicked with id: '+$(this).attr('id')); 
});