href link doesn't work

Question

I am placing a piece of php code within a html page. I am using href but the link is not working . here is my html+php piece of code:

<div class="panel-body">
    <div class="row">
        <div class="col-md-12 space20">
           <button class="btn btn-green add-row">
             Add New <i class="fa fa-plus"></i>
           </button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover" id="sample_2">
    <?php 
      $servername = "localhost";
      $username = "hevak_neshat"; 
      $password = "shir moz peste";
      $dbname = "hevak_android_api";
    // Create connection 
      $conn = new mysqli($servername, $username, $password, $dbname);
                                                                      // Check connection
      if ($conn->connect_error){
         die("Connection failed: " . $conn->connect_error); 
      } 
      $sql = "SELECT * FROM beacons";
      $result = $conn->query($sql);  
      if($result -> num_rows > 0)
      {
           echo "<thead>
                   <tr><th>Major number</th>
                       <th>Minor number</th>
                       <th>Client</th>
                       <th>Location</th>
                       <th>Link to ad</th>
                       <th>Attachment</th>
                       <th>Edit</th>
                   </tr> ;</thead>";
           echo "<tbody>";
           while($row = $result -> fetch_assoc())
           {
             echo "<tr><td>" .$row["major"]. "</td><td>" .$row["minor"]. "</td><td>" .$row["client"]. "</td><td>" .$row["geolocation"]. "</td><td>" .$row["linktoadd"].  "</td><td>" .$row["attacment"] . "</td><td>"; 
             echo  "<a href=\"#\" class =\"edit-row\" >";
             echo  "Edit";
             echo  "</a></td>";
             echo "</tr>";  
           }
           echo "</tbody></table>";
       } else {
           echo "no results";
       }

?>

and following is part of my .js code that is related to the html :

$('#sample_2').on('click', '.edit-row', function(e) {
        e.preventDefault();
        if (actualEditingRow) {
            if (newRow) {
                oTable.fnDeleteRow(actualEditingRow);
                newRow = false;
            } else {
                restoreRow(oTable, actualEditingRow);

            }
        }
        var nRow = $(this).parents('tr')[0];
        editRow(oTable, nRow);
        actualEditingRow = nRow;

    });
    var oTable = $('#sample_2').dataTable({
        "aoColumnDefs" : [{
            "aTargets" : [0]
        }],
        "oLanguage" : {
            "sLengthMenu" : "Show _MENU_ Rows",
            "sSearch" : "",
            "oPaginate" : {
                "sPrevious" : "",
                "sNext" : ""
            }
        },
        "aaSorting" : [[1, 'asc']],
        "aLengthMenu" : [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "iDisplayLength" : 10,
    });
    $('#sample_2_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
    // modify table search input
    $('#sample_2_wrapper .dataTables_length select').addClass("m-wrap small");
    // modify table per page dropdown
    $('#sample_2_wrapper .dataTables_length select').select2();
    // initialzie select2 dropdown
    $('#sample_2_column_toggler input[type="checkbox"]').change(function() {
        /* Get the DataTables object again - this is not a recreation, just a get of the object */
        var iCol = parseInt($(this).attr("data-column"));
        var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
        oTable.fnSetColumnVis(iCol, ( bVis ? false : true));
    });
};
return {
    //main function to initiate template pages
    init : function() {
        runDataTable_example1();
        runDataTable_example2();
    }
};

My exact problem is when I remove the php part "Edit" is clickable and works correctly. but when i place the php so i can be able fetch my database data, "Edit" is still a link but when you click on it nothing happens. I cannot find the cause of this problem

Update: here is my browser provided html:

<div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-12 space20">
                                                <button class="btn btn-green add-row">
                                                    Add New <i class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="table-responsive"> 
                                        <table class="table table-striped table-hover" id="sample_2">

                                <thead> 
                                                    <tr>
                                                        <th>Major number</th>
                                                        <th>Minor number</th>
                                                        <th>Client</th>
                                                        <th>Location</th>
                                                        <th>Link to ad</th>
                                                        <th>Attachment</th>
                                                        <th>Edit</th>

                                                    </tr> 
                                                </thead><tbody><tr><td>2</td><td>5</td><td>noxel</td><td>16253</td><td>www.noxel.com</td><td>test</td><td><a href='#' class ='edit-row' >Edit<script>
$(document).on("click","edit-row",function(event){

alert("m here");
});
</script></a></td></tr><tr><td>7</td><td>9</td><td>nox</td><td>123456</td><td>www.digikla.com</td><td>jhhfdbc</td><td><a href='#' class ='edit-row' >Edit<script>
$(document).on("click","edit-row",function(event){

alert("m here");
});
</script></a></td></tr><tr><td>0</td><td>0</td><td>fgfh</td><td>645312</td><td>wwwwwwwwwwwww</td><td>wwwwwwwww</td><td><a href='#' class ='edit-row' >Edit<script>
$(document).on("click","edit-row",function(event){

alert("m here");
});
</script></a></td></tr></tbody>
                                            </table>                                            

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- end: PAGE CONTENT-->
                    </div>

                </div>
                <!-- end: PAGE -->
            </div>

Answer 1

You need not to write script in php-loop . Also note that ".edit-row" is valid selector for classes not "edit-row"

Do not forget to prevent the default behaviour of <a> elements. Use Event.preventDefault()

Put your script right before closing of body( </body> ) tag.

Try this:

 $(document).on("click", ".edit-row", function(event) { event.preventDefault(); alert("m here"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="panel-body"> <div class="row"> <div class="col-md-12 space20"> <button class="btn btn-green add-row"> Add New <i class="fa fa-plus"></i> </button> </div> </div> <div class="table-responsive"> <table class="table table-striped table-hover" id="sample_2"> <thead> <tr> <th>Major number</th> <th>Minor number</th> <th>Client</th> <th>Location</th> <th>Link to ad</th> <th>Attachment</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td>2</td> <td>5</td> <td>noxel</td> <td>16253</td> <td>www.noxel.com</td> <td>test</td> <td><a href='#' class='edit-row'>Edit</a> </td> </tr> <tr> <td>7</td> <td>9</td> <td>nox</td> <td>123456</td> <td>www.digikla.com</td> <td>jhhfdbc</td> <td><a href='#' class='edit-row'>Edit</a> </td> </tr> <tr> <td>0</td> <td>0</td> <td>fgfh</td> <td>645312</td> <td>wwwwwwwwwwwww</td> <td>wwwwwwwww</td> <td><a href='#' class='edit-row'>Edit</a> </td> </tr> </tbody> </table> </div> </div> 

Fiddle here

Answer 2

Try replacing your js code function $('#sample_2').on('click', '.edit-row', function(e) { with `

$(document).on('click', '#sample_2 a.edit-row', function(e) {

OR SIMPLY

$(document).on('click', 'a.edit-row', function(e) {

this might work for your

Answer 3

I'm quite sure that delegated event handlers would help: http://api.jquery.com/on/

Try these changes:

echo  "<a href='#' class ='edit-row' >";


$(document).on("click",".edit-row",function(event){

alert("m here");
});

Answer 4

change your top javascript code to this and check.

 $(document).on('click', '.edit-row', function(e) {
        e.preventDefault();
        if (actualEditingRow) {
            if (newRow) {
                oTable.fnDeleteRow(actualEditingRow);
                newRow = false;
            } else {
                restoreRow(oTable, actualEditingRow);

            }
        }
        var nRow = $(this).parents('tr')[0];
        editRow(oTable, nRow);
        actualEditingRow = nRow;
    });