나는 매우 기본적인 것을 시도하고 있지만 실패한 것 같습니다. 부트 스트랩 모달 내부의 버튼 클릭을 처리해야합니다. 이것이 저의 최근 시도입니다. 모달 안의 버튼을 클릭해도 아무 일도 일어나지 않습니다. 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">×</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) .ready 아래에 클릭을 추가하려고 시도했지만 똑같은 것입니다.
$("#duel_pp #select_target").click(function(){
alert('hello world')
});
이 시도:
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');
});
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다