jquery - Bootstrap 模态按钮单击 jquery

Question

我正在尝试一件非常基本的事情，但似乎我失败了。我需要处理 Bootstrap 模式内的按钮点击，这是我最近的尝试。单击模态内的按钮时没有任何反应。我只能假设我没有使用 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>

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