I've been attempting a simple task, but it appears to be unsuccessful. I'm trying to handle the click event of a button inside a bootstrap modal, and so far, nothing happens when clicking the button. My guess is that my jQuery selector for selecting the button inside the modal is incorrect.
The problem arose when using alert() with the modal. 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">×</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);
});
};
I also tried adding click under $(document).ready but same thing.
$("#duel_pp #select_target").click(function(){
alert('hello world')
});