在jquery中追加后访问值

时间:2017-07-13 20:24:10

标签: javascript jquery dom

我在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 ...... !! 有什么错吗? 提前致谢

1 个答案:

答案 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>