href鏈接不起作用

Question

我在一個html頁面中放置了一段PHP代碼。 我正在使用href，但鏈接不起作用。 這是我的html + php代碼段：

<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";
       }

？>

以下是我的.js代碼的一部分，與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();
    }
};

我確切的問題是，當我刪除PHP部分“編輯”是可點擊的，並正常工作。 但是當我放置php以便我能夠獲取我的數據庫數據時，“編輯”仍然是一個鏈接但是當你點擊它時沒有任何反應。 我找不到這個問題的原因

更新：這是我的瀏覽器提供的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

你不需要在php-loop編寫script 。 另請注意， ".edit-row"是非"edit-row"類的有效選擇器

不要忘記阻止<a>元素的默認行為。 使用Event.preventDefault()

在關閉body（ </body> ）標記之前放置script 。

嘗試這個：

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

在這里小提琴

Answer 2

嘗試替換你的js代碼函數$('#sample_2').on('click', '.edit-row', function(e) {

$（document）.on（'click'，'＃sample_2 a.edit-row'，function（e）{

或者簡單

$（document）.on（'click'，'a.edit-row'，function（e）{

這可能對你有用

Answer 3

我非常確定委派的事件處理程序會有所幫助： http ： //api.jquery.com/on/

嘗試以下更改：

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


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

alert("m here");
});

Answer 4

將您的熱門JavaScript代碼更改為此並檢查。

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