我的点击事件功能在某些情况下停止工作，我无法找到此代码失败的位置

Question

代码的目的是从表行读取数据目标，并将其与每个div上的数据目标进行比较，使用类“box”。 如果两个数据目标都相等，我在[div]中添加一个类，它将使用css创建一个脉冲效果。

但是代码适用于某些行，对于某些行，代码根本不会运行。

 $(document).ready(function() { var names = [ { "name": "Cable", "location": "7-3" }, { "name": "Card", "location": "12-4" }, { "name": "Computer", "location": "69-4" }, { "name": "Cpu", "location": "69-6" }, { "name": "CSS", "location": "6-5" }, { "name": "Cube", "location": "12-3" }, { "name": "Disk", "location": "39-1" }, { "name": "Gpu", "location": "33-2" }, { "name": "Html", "location": "62-3" }, { "name": "Memory", "location": "60-5" }, { "name": "Monitor", "location": "14-1" }, { "name": "Mouse", "location": "83-4" }, { "name": "PHP", "location": "74-2" }, { "name": "Python", "location": "7-2" }, { "name": "Pyhton", "location": "13-2" } ]; var obj = names; var tmp = ''; var mapDot = ''; var btData = ''; var id= ''; var id2= ''; var addclass = 'pulse'; var html = "<table id =\\"example\\" class=\\"table table-striped table-bordered\\">" + "<thead class=\\"thead-dark\\"><tr><th scope =\\"scope\\">Name</th><th scope =\\"scope\\">Location</th></tr></thead>"; $.each( obj, function( key, value ) { // Generate a modal Body and a Dot on the map for each object in the array mapDot += ' <div class="box" data-name=#' + value.location + ' data-toggle="modal" data-target=#' + value.location +' id=l' + value.location + '></div>'; btData += '<div class="glyphicon glyphicon-plus-sign"data-toggle="modal" data-target=#' + value.location +'></div>' tmp += ' <div class="modal fade" id=' + value.location + ' role="dialog" aria-hidden="true">'; tmp += ' <div class="modal-dialog" role="document">'; tmp += ' <div class="modal-content">'; tmp += ' <div class="modal-header">'; tmp += ' <h5 class="modal-title">' + "Details for " + value.name + '</h5>'; tmp += ' <button type="button" class="close" data-dismiss="modal" aria-label="Close">'; tmp += ' <span aria-hidden="true">&times;</span></button></div>'; tmp += ' <div class="modal-body">' + "Name: " + value.name + "<br>" + "Location: " + value.location + "</div>"; tmp += ' </div>'; tmp += ' </div>'; tmp += ' </div>'; html += "<tr><td class=\\"test\\" data-toggle=\\"modal\\" data-target=#" + value.location + ">" + value.name + "</td><td>" + value.location + "</a></td></tr>"; }); $(".table-responsive").html(html + "</tbody>" + "</table>"); //append the table to the html body $('#example').DataTable(); // convert the table into a data table $('.info_box_sidebar').prepend(tmp); //show info slider on the left $('.map-1').prepend(mapDot); // show each dot in the map //when a red dot is clicked add the pulse effect var info = $(".box").click(function() { info.removeClass(addclass); $(this).addClass(addclass); }); /*When a row is clicked compare the data target to the dots on the map if equal add the pulse effect*/ $('td').on( "click", function() { var id = $(this).attr('data-target'); $(".box").removeClass(addclass); $(".box").each(function(){ var id2 = $(this).attr('data-target'); if(id === id2) { $(this).addClass(addclass); } }); }); //When Boostrap modal is close remove the "pulse" class $(".close").click(function() { $(".box").removeClass(addclass); }); }); // end of document.ready 

 .map{ margin-bottom:30px; } .box { width:50px; height:50px; background-color: #D63134; border-radius: 50%; display:block; float:left; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1!important; background-color: #000; } body.modal-open { overflow: visible!important; } .modal-backdrop.show { opacity: 0!important; } .modal-content{ border-radius:0!important; } #example_wrapper{overflow-y: hidden;} .fa-plus-circle{color:#0275d8;margin-right:5px;} .modal-dialog { position: fixed; top: 20px; bottom: 0; left: 0; z-index: 10040; overflow: auto; overflow-y: auto; width: 16.70%; } .green-bg{ background: green; } body .modal-open { overflow: visible !important; } .color{ background-color: green; } /*css test*/ .pulse { display: block; width: 50px; height:50px; border-radius: 50%; background: #3FBF3F;; cursor: pointer; box-shadow: 0 0 0 rgba(63,191,63, 0.4); animation: pulse 2s infinite; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(63,191,63, 0.4); } 70% { -webkit-box-shadow: 0 0 0 10px rgba(63,191,63, 0.4); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(63,191,63, 0.4); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(63,191,63, 0.4); box-shadow: 0 0 0 0 rgba(63,191,63, 0.4); } 70% { -moz-box-shadow: 0 0 0 10px rgba(63,191,63, 0.4); box-shadow: 0 0 0 10px rgba(63,191,63, 0.4); } 100% { -moz-box-shadow: 0 0 0 0 rgba(63,191,63, 0.4); box-shadow: 0 0 0 0 rgba(63,191,63, 0.4); } } 

  <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap4.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/responsive.bootstrap4.min.js"></script> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Map App</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <div class="info_box_sidebar"> </div> </li> </ul> </div> </div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"> <h1 class="h2">Map</h1> </div> <div class"my-4"> <div class="map"> <div class="map-1"> </div> </div> </div> <h2>Search</h2> <div class="locate"> <div class="table-responsive"> </div> </div> </main> </div> </div> </body> </html> 

Answer 1

通常是因为一个绑定事件（ $('td').on( "click", function() {... ）在页面完全加载之前，遗憾的是，这似乎不包含在你的片段中通过将绑定放在windows load事件中，确保并在页面完全加载后绑定事件：

$(window).on('load', function() {
    $('td').on( "click", function() {
        var id = $(this).attr('data-target'); 
        $(".box").removeClass(addclass);

        $(".box").each(function(){
            var id2 = $(this).attr('data-target'); 
            if(id === id2) {
                $(this).addClass(addclass);
            }
        });
    });
});

更重要的是，我认为你想要：

<tr>
    <td data-toggle="modal" data-target="#28-3">Cube</td>
    <td>28-3</td>
</tr>

不

<tr>
    <td data-toggle="modal" data-target="#28-1">Cube</td>
    <td>28-3</td>
</tr>

Answer 2

既然你说从第二页开始出现问题，

试试这个：

$('#example').on( "click", "td", function() {

代替：

$('td').on( "click", function() {

Answer 3

由于您使用的是jQuery，我建议使用click函数：

$("Element").click(function() {
    // Your code here
});