Bootstrap模式按鈕點擊jquery

Question

我正在嘗試一個非常基本的東西，但它似乎我失敗了。我需要處理啓動模式中的按鈕點擊，這是我最近的嘗試。當我點擊模式中的按鈕時沒有任何反應。我只能假設我沒有用jQuery選擇器正確選擇它。

該問題試圖使用alert（）與模態。 HTML：

<!-- Duel --> 
<div class="modal fade" id="duel_pp" tabindex="-1" role="dialog" aria-labelledby="duel_pp"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="duel_pp_content">Duel</h4> 
     </div> 
     <div class="modal-body"> 
     <div id="userlist"> 
     <table> 
      <thead> 
      <th>Player</th> 
      <th>Energy</th> 
      <th>Country</th> 
      <th>Region</th> 
      <th>Duel</th> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

的script.js：

// DOM Ready ============================================================= 
$(document).ready(function() { 
    $("#duel").click(function(){ 
     populateTable(); 
    }); 

}) 
$(document).on("click", "#duel_pp #select_target", function(){ 
    //var id = $(this).closest("tr").find(".target_name").text(); 
    alert("hello world!"); 
}); 
// Functions ============================================================= 

// Fill table with data 
function populateTable() { 

    // Empty content string 
    var tableContent = ''; 

    // jQuery AJAX call for JSON 
    $.getJSON('/modalRoutes/validTargets', function(data) { 
     // For each item in our JSON, add a table row and cells to the content string 
     $.each(data, function(){ 
      tableContent += '<tr>'; 
      tableContent += '<td class=\'target_name\'>' + this.local.username + '</td>'; 
      tableContent += '<td>' + this.local.energy + '</td>'; 
      tableContent += '<td>' + this.local.country + '</td>'; 
      tableContent += '<td>' + this.local.region + '</td>'; 
      tableContent += '<td> <button type=\'button\' id=\'select_target\' class=\'btn btn-danger\'> Duel </button></td>'; 
      tableContent += '</tr>'; 
     }); 

     // Inject the whole content string into our existing HTML table 
     $('#duel_pp #userlist table tbody').html(tableContent); 
    }); 
}; 

我也嘗試下的$（document）加入點擊。就緒，但同樣的事情。

$("#duel_pp #select_target").click(function(){ 
     alert('hello world') 
}); 

Answer 1

試試這個：在執行console.log

function populateTable() { 

    // jQuery AJAX call for JSON 
    $.getJSON('/modalRoutes/validTargets', function(data) { 
     // Empty content string 
     var trContent = ''; 

     // For each item in our JSON, add a table row and cells to the content string 
     $.each(data, function(){ 
      trContent += '<tr>'; 
      trContent += '<td class=\'target_name\'>' + this.local.username + '</td>'; 
      trContent += '<td>' + this.local.energy + '</td>'; 
      trContent += '<td>' + this.local.country + '</td>'; 
      trContent += '<td>' + this.local.region + '</td>'; 
      trContent += '<td> <button type=\'button\' class=\'btn btn-danger select_target\'> Duel </button></td>'; 
      trContent += '</tr>'; 
     }); 

     // Inject the whole content string into our existing HTML table 
     $('#duel_pp #userlist table tbody').append(trContent); 

     var $trContent = $(trContent); 

     $trContent.find('.select_target').on('click', function(e){ 
      e.preventDefault(); 
      alert('hello world'); 
     }); 
    } 
}