我的单击事件函数在某些情况下停止工作，我找不到这段代码在哪里失败

Question

代码的目的是从表行中读取数据目标，并将其与每个div上的数据目标与类"box“进行比较。如果两个数据目标相等，我将向css添加一个类，这将使用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

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

试试这个：

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

而不是：

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

Answer 2

通常情况下，这是因为在页面完全加载之前绑定事件($('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 3

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

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