捕获href并阻止事件默认行为。

Question

捕获href并阻止事件默认行为。

3

不确定为什么代码无法运行。JavaScript既没有打印警告框也没有阻止事件默认行为。我曾以为，数据会异步加载，让我留在同一页上。

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div data-role="page"> 
<div data-role="header"></div> 
    <div data-role="content">
        <p id = "heading">Is Nursing For You?</p>
        <br/>
        <div id = "div1" align="center"></div>
    </div> 
<div data-role="footer" id = "foot" data-position="fixed">
<table>
    <tr>
        <th><h1 id = "alignLeft">Future Goals</th></h1>
        <th><h1 id = "socialMediaText alignCenter">Get Social With Us!</h1>
</th>
        <th></th>
    </tr>
    <tr>
        <td id = "alignLeft">Telephone: 304-444-39876</td>
    <tr>
        <td = "alignLeft">Email: futurenurseky@gmail.com</td>
    </tr>
    </tr>
</table>
</div> 
</div> 

This is where im having the trouble at. Not sure why the alert is not sending or redirecting me.
<script type='text/javascript'>
$(document).ready(function(){
$("#div1").load("FONWVhp.php");
    $('#div1').click(function(e){
    e.preventDefault();
    alert($(this).attr('href'));
});
});




    </script>

</body>
</html>

这是Fp.php文件，当页面加载时会被调用，但一旦页面加载完成后，会显示href。因此，当用户点击href时，页面将保持不变，但数据将会改变并获取来自底部的articles.php中的信息。

$sqlPAQuery = "SELECT pages.pageId, pages.pageTitle FROM pages order by 
pages.pageId";
$paqueryResult = mysqli_query($conn,$sqlPAQuery);
while ($paqueryRow = mysqli_fetch_object($paqueryResult))
{


$pages = "<div class='center-wrapper'><a href = articles.php?
pageId=".$paqueryRow->pageId."><button class= center-wrapper'>".$paqueryRow-
>pageTitle."</button></a><br/><br/></div>";
echo $pages;

}

articles.php

$sqlARTICLEQuery = "SELECT * FROM articles where pageId=".$_GET['pageId']." 
order by articleId";
$articlequeryResult = mysqli_query($conn,$sqlARTICLEQuery);
while ($articlequeryRow = mysqli_fetch_object($articlequeryResult))
{
$articles ="<div id = 'div1' class='center-wrapper'><a href = 
article.php?articleId=".$articlequeryRow->articleId."><button id 
='wrapper'>".$articlequeryRow->articleTitle."</button></a><br/><br/></div>";

echo $articles;
}

- Adam Zeigler

3

添加 event 参数到 click 处理函数中。 - Mouneer

3

提醒一下，您有两个具有相同ID“div1”的div。 - karliwson

2个回答

0

只需在函数中放置一个 e / event

<script type='text/javascript'>

 $(document).ready(function(){
     $("#div1").load("Fp.php"); 
     $('div.div1 a button').click(function(e){ 
         e.preventDefault(); 
         alert($(this).attr('href')); 
     });
 });
</script>

- Sharifur Robin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karliwson · Accepted Answer

在操纵之前，您需要等待div内容加载。尝试使用以下方法：

等待div内容加载

$(document).ready(function() {
    $("#div1").load('FONWVhp.php', function() {
        $('#div1 div.center-wrapper a button').click(function(event){
            event.preventDefault();
            alert($(this).parent().attr('href'));
        });
    });
});

另外，我已经纠正了您代码中的一些错误：

请使用 $('#div1 div.center-wrapper a button').click(...) 代替 $('#div1').click(...)。
我想您想要获取锚点的 href，所以您需要使用 alert($(this).parent().attr('href'))。