Bootstrap Modal Button Нажмите 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); 
    }); 
}; 

Я также попытался добавить щелчок под $ (документ) .ready, но то же самое.

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

Answer 1

Попробуйте это:

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