Adam Zeigler Adam Zeigler - 8 months ago 88
HTML Question

Capturing href and prevent event default

Not sure why the code is not working. The javascript is not printing the alert box nor preventing the event default. I was under the assumption that the data would load asynchronously keeping me on the same page.

<!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: [email protected]</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>


This is the Fp.php which is called when the page is loaded but once the page is loaded there are href's that are displayed. so when the person clicks the href the page will stay but the data will change and get the info coming from articles.php (at the bottom).

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

Answer Source

You need to wait for the div contents to load before manipulating it. Try this:

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

Also, I've corrected some mistakes in your code:

  1. Instead of $('#div1').click(...) use $('#div1 div.center-wrapper a button').click(...).
  2. I suppose you want the anchor's href, so you need to use alert($(this).parent().attr('href')).
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download