My click event function stop working for some cases and I can't find where do this code fails

Question

The purpose of the code is to read the data-target from table rows and compare it to the data target on each div with the class "box". If both data-target are equal I add a class to the [div]which will create a pulse effect using css.

The code work for some of the rows however, for some rows the code will not run at all.

 $(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

Often times it is because one binds the event ( $('td').on( "click", function() {... ) before the page is completely loaded, unfortunately that does not seem to be included in the snippets you supply. Make sure and bind the event once the page is completely loaded by putting the bindings inside the windows load event:

$(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);
            }
        });
    });
});

More importantly, I think you want:

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

NOT

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

Answer 2

Since you say the problem occurs from the second page onwards,

try this:

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

Instead of:

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

Answer 3

Since you are using jQuery, I would suggest using the click function:

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