Question

我有一个使用后端的JSON数据动态创建的表。有一个复选框列用于从特定行检索数据。选中复选框后，我需要使用Javascript获取数组中的行数据。我有以下代码，当我选中复选框时，我无法获取行数据或无法获取警报，如代码中所示。任何人都可以帮我纠正这个问题吗？

HTML代码：

<table id="playerList"class="table table-bordered"style="background-color:#black;" >
            <thead style="background-color:#22b14c;">
              <tr >
                <th style="width:20px;"><input id='checkbox1' class='case' name='case[]' type='checkbox' ></input></th>
                <th style="width:200px">Player</th>
                <th style="width:200px;">Score</th>
              </tr>
            </thead>
            <tbody style="background-color:#black;" >


            </tbody>
        </table>

Javascript代码：

<script type="text/javascript">
$(document).ready(function() {

show_PlayerLimits();
$('.case').click(function(){
    var row = jQuery(this).closest('tr');
    $(row).each(function(){

        alert("in a row");
    });
});
function show_PlayerLimits(){
                    $.ajax({   
                        url: "http://localhost:8080/API/admin/getAllPlayers",
                        method: "POST",
                        dataType: "json",
                        crossDomain: true,
                        contentType: "application/json; charset=utf-8",

                        cache: false,
                        beforeSend: function (xhr) {
                            /* Authorization header */
                            xhr.setRequestHeader("Authorization", localStorage.accessToken );

                        },
                        success: function (response, textStatus, jqXHR) {
                            console.log(response);
                            //alert("success position");
                            if(response.success==true){
                                data=response.users;
                                console.log(data);
                                 len=response.users.length;
                                 user=response.users;
                                 console.log(len);
                                  $.each(data,function(i,user){
                                    $('tr:odd').addClass('odd');
                                        var tblRow =
                                            "<tr>"
                                            +"<td><input name='chk[]' type='checkbox' class='chk' value='"+user.id+"'/></td>"
                                            +"<td>"+user.player+"</td>"
                                            +"<td>"+user.score+"</td>"

                                            +"</tr>";

                                            $(tblRow).appendTo("#playerList");

                                            });

                                    $('#playerList').DataTable();

                                console.log(data);
                                console.log(response.users[1].player);
                                console.log(response.users[0].score);
                                console.log(response.users.length);

                            }   
                            else
                            {
                                alert(response.message);
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(textStatus,errorThrown);
                        }
            })




            return false;
            }

});

Answer 1

$('.case').click(function()

当您检查标题行复选框（我能够使用您的代码获取警报框）时，将触发此功能。但我发现你在动态添加每行的复选框，但是分配了class =＆＃34; chk＆＃34;到那些复选框。将上述函数更改为$('.chk').click(function()或者设置类=＆＃34; case＆＃34;到表格中的所有复选框。

更新：工作示例发布在这里。在选中的每个复选框上，将更改相应行的背景颜色。我还添加了一个新按钮添加新行，以演示页面加载后动态创建的元素的click事件处理程序。

<html>

<head>
   <meta charset="utf-8">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script>
      $(document).ready(function () {
         show_PlayerLimits();
         $('#addRow').click(function () {
            var rowCount = $('#playerList tr').length - 1;
            var tblRow =
               "<tr>"
               + "<td><input name='chk[]' type='checkbox' class='chk' value='" + rowCount + "'/></td>"
               + "<td>Player " + rowCount + "</td>"
               + "<td>" + rowCount + " runs</td>"
               + "</tr>";
            $(tblRow).appendTo("#playerList");
            $('#playerList').find('[value="' + rowCount + '"]').click(changeCheckedRowColor);
         })
         function show_PlayerLimits() {
            for (var count = 0; count < 4; count++) {
               $('tr:odd').addClass('odd');
               var tblRow =
                  "<tr>"
                  + "<td><input name='chk[]' type='checkbox' class='chk' value='" + count + "'/></td>"
                  + "<td>Player " + count + "</td>"
                  + "<td>" + count + " runs</td>"
                  + "</tr>";
               $(tblRow).appendTo("#playerList");
            }
            $('.chk').click(changeCheckedRowColor);
         }
         function changeCheckedRowColor() {
            var row = $(this).closest('tr');
            if ($(this).is(':checked')) {
               $(row).attr('style', 'background-color:blue');
            }
            else $(row).removeAttr('style');
         }
      });
   </script>
</head>

<body>
   <table id="playerList" class="table table-bordered" style="background-color:black;">
      <thead style="background-color:#22b14c;">
         <tr>
            <th style="width:20px;"><input id='checkbox1' class='case' name='case[]' type='checkbox'></input>
            </th>
            <th style="width:200px">Player</th>
            <th style="width:200px;">Score</th>
         </tr>
      </thead>
      <tbody style="background-color:white;">
      </tbody>
   </table>
   <button id="addRow">Add Row</button>
</body>

</html>

Answer 2

复选框上的点击事件调用不会针对动态添加的元素触发，因为$('.case')中的数组是在页面加载时构建的 - 这是在JavaScript代码创建元素之前。

解决方案是在jQuery中使用动态事件方法：

$(document).on('click', '.case', function(){
// Your function...
}

使用此方法，jQuery将在文档上单击（即页面上的任何位置）时开始执行处理程序，但只有在事件发送者（单击的对象）与提供的查询匹配时才会触发定义的函数。 / p>

编辑：

根据@PrashanthBR的评论，您还可以在生成新复选框并将其附加到页面后应用事件处理程序。

检索使用json对象

2 个答案: