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

?>

以下是与 html 相关的我的 .js 代码的一部分:

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

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

不要忘记阻止 <a> 元素的默认行为。使用 Event.preventDefault()

将您的 script 放在 body( </body> ) 标签之前。

试试这个:

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