Question

我正在使用PHP应用程序在其中使用jquery将数据添加到引导模式。我试图使用一个jQuery选择器来获取一个A标签的id，然后做一些事情。我在让选择器执行某些操作时遇到问题。

无法选择#saveScore的ID？

我已在初始单击功能中添加了控制台日志语句，以验证ID是否在DOM中。我得到这个陈述的结果。

这是我的代码

$(document).ready(function(){
    $(document).on('click', 'a[data-role=score]', function(){

        var id = $(this).data('id');
        var team_name1 = $('#'+id).find('p[data-target=team_name1]').text();
        var team_image1 = $('#team1_image'+id).data('image');
        var team_name2 = $('#'+id).find('p[data-target=team_name2]').text();
        var team_image2 = $('#team2_image'+id).data('image');
        var team1_score = $('#scoreID'+id).find('p[data-target=team1_score]').text();
        var team2_score = $('#scoreID'+id).find('p[data-target=team2_score]').text();

       
       
        $('#team_name1').html(team_name1);
        $('#team_name2').html(team_name2);
        $('#team_image1').removeClass().addClass("col-4 flag ").addClass(team_image1);
        $('#team_image2').removeClass().addClass("col-4 flag ").addClass(team_image2);
        $('#modal_team1_score').val(Number(team1_score));
        $('#modal_team2_score').val(Number(team2_score));

        $('#scoreModal').modal('toggle');
       
        console.log( $('#saveScore'));
    });

  

    $("#saveScore").click(function(){
        alert('test');
        
        
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
        <button type="button" class="btn btn-secondary " data-dismiss="modal">Close</button>
        <a href="#" id="saveScore" class="btn btn-primary">Update Score</a>
 </div>

现在，我只是想弹出一个警报，提示您正在选择#saveScore ID。

Answer 1

提供其余代码可帮助解决问题-因此，感谢您上载重现问题所需的代码。

问题似乎出在.modal-footer元素之外。它应该嵌套在里面。真的很容易错过。

这是Bootstrap 4.0文档中关于模式的第一个示例：

.modal-content

您会注意到，所有三个模式内容节（<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>，.modal-header和.modal-body）都嵌套在.modal-footer元素内。如果我只是在您的站点上打开DevTools，然后将.modal-content元素拖到.modal-footer之后的.modal-content元素内，它似乎可以正常工作。

我的第一个测试只是打开控制台并发出.modal-body，它应该发出警报，因此用户似乎无法单击按钮-然后我使用了检查元素并将鼠标悬停在按钮上，但Chrome选择的只是模式创建的背景；如果背景在$('#saveScore').trigger("click");之外，则似乎在.modal-footer的前面（z索引方向）。

希望这会有所帮助！

Answer 2

我无法添加评论，因此我将在此处添加答案。

我想您正在页面中添加动态内容因此发生事件委托时，您可以尝试

$(document).on("click" , "#saveScore" , function(){
    /*   write your code here*/
   alert('test');

});

有关更多信息，请访问此link

jQuery ID选择器不起作用或发出警报

2 个答案: