我在StackOverFlow中看到了很多与此主题相关的问题。但在我的案例中没有一个有用。
我附加了bootstrap-select
的表格正文并提交button
,如下所示。
$('#modalBodyTable').append(
'<tr>'+
'<td>'+
'<div class= " col-md-6 "><select class="bootstrap-select" name="winner">'+
'<option selected disabled hidden value="">Select Winner</option>'+
'<option value="'+match.player_one+'">'+match.player_one.name+'</option>'+
'<option value="'+match.player_two+'">'+match.player_two.name+'</option></select>'+
'</td>'+
'<td>'+
'<button type="submit" id="submitWinner" class="btn btn-info btn-xs">confirm winner</button></div>'+
'</td>'+
'</tr>')
我需要访问name="winner"
以便我采取进一步行动。我已尝试过如下所示。
$('body').on('click','#submitWinner',function() {
var table=$("modalBodyTable");
var winner=table.find('winner')
alert(JSON.stringify(winner));
})
但是得到undefined
...... !!
有什么错吗?
提前致谢
答案 0 :(得分:0)
您正在寻找像<winner></winner>
这样的元素,如果您想要定位名称,请使用属性选择器,它将返回包含元素的jQuery对象,您可能想要选择<的值< / p>
$('#modalBodyTable').on('click','#submitWinner',function() {
var table = $("#modalBodyTable");
var winner = table.find('[name="winner"]');
alert( winner.val() );
});
$('#modalBodyTable').append(
'<tr>' +
'<td>' +
'<div class= " col-md-6 "><select class="bootstrap-select" name="winner">' +
'<option selected disabled hidden value="">Select Winner</option>' +
'<option value="player1">player 1</option>' +
'<option value="player2">player 2</option></select>' +
'</td>' +
'<td>' +
'<button type="submit" id="submitWinner" class="btn btn-info btn-xs">confirm winner</button></div>' +
'</td>' +
'</tr>');
$('#modalBodyTable').on('click', '#submitWinner', function() {
var table = $("#modalBodyTable");
var winner = table.find('[name="winner"]');
alert(winner.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="modalBodyTable"></table>