[英]href link doesn't work
I am placing a piece of php code within a html page. 我在一个html页面中放置了一段PHP代码。 I am using href but the link is not working .
我正在使用href,但链接不起作用。 here is my html+php piece of code:
这是我的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";
}
?> ?>
and following is part of my .js code that is related to the html : 以下是我的.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();
}
};
My exact problem is when I remove the php part "Edit" is clickable and works correctly. 我确切的问题是,当我删除PHP部分“编辑”是可点击的,并正常工作。 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.
但是当我放置php以便我能够获取我的数据库数据时,“编辑”仍然是一个链接但是当你点击它时没有任何反应。 I cannot find the cause of this problem
我找不到这个问题的原因
Update: here is my browser provided html: 更新:这是我的浏览器提供的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>
You need not to write
script
inphp-loop
.你不需要在
php-loop
编写script
。 Also note that".edit-row"
is valid selector for classes not"edit-row"
另请注意,
".edit-row"
是非"edit-row"
类的有效选择器
Do not forget to prevent the default behaviour of <a>
elements. 不要忘记阻止
<a>
元素的默认行为。 Use Event.preventDefault()
使用
Event.preventDefault()
Put your script
right before closing of body( </body>
) tag. 在关闭body(
</body>
)标记之前放置script
。
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>
Try replacing your js code function $('#sample_2').on('click', '.edit-row', function(e) {
with ` 尝试替换你的js代码函数
$('#sample_2').on('click', '.edit-row', function(e) {
$(document).on('click', '#sample_2 a.edit-row', function(e) {
$(document).on('click','#sample_2 a.edit-row',function(e){
OR SIMPLY 或者简单
$(document).on('click', 'a.edit-row', function(e) {
$(document).on('click','a.edit-row',function(e){
this might work for your 这可能对你有用
I'm quite sure that delegated event handlers would help: http://api.jquery.com/on/ 我非常确定委派的事件处理程序会有所帮助: http : //api.jquery.com/on/
Try these changes: 尝试以下更改:
echo "<a href='#' class ='edit-row' >";
$(document).on("click",".edit-row",function(event){
alert("m here");
});
change your top javascript code to this and check. 将您的热门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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.