Why is the click event on a hyperlink not being triggered? - javascript

Why is the click event on a hyperlink not fired?
#Html.ActionLink(
"Show the privacy policy",
"PrivacyPolicy",
null,
new { id = "privacyLink" })
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function () {
alert('a');
});
});
</script>
The myDiv click event is fired as expected but the privacyLink's event is not fired, that is the alert is not shown.
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/AjaxDemo.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ Log On ]
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
<section id="main">
<h2>Welcome to ASP.NET MVC!</h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
<div id="myDiv">
<p>
Me Gusta
</p>
</div>
Show the privacy policy
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).src = $(this).attr('href');
});
});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>

Other than the fact that you should return false from the click callback of your anchor to prevent the browser from redirecting away I do not see anything wrong with it:
$('a#privacyLink').click(function () {
alert('a');
return false;
});
Also make sure that you do not have other elements with id="privacyLink" anywhere in your DOM because ids must be unique.
Also check your js console in the browser to ensure that you do not have some javascript errors preventing the .click handler to be attached properly.

Try with event preventDefault() method.
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).attr('href', $(this).attr('href'));
});

Use this :
Since your anchor is not formed , your binding is not working. Use http://api.jquery.com/on/
$("a#privacyLink").on("click", function(event){
alert('a');
});
This is the jsfiddle to simulate your condition (Dynamic generation of HTML elements)
http://jsfiddle.net/nhNpw/6/

Related

Javascript - Redirect if the value in a input box is correct

I have a problem, I'm doing a little game and I made a level, where you just have to change the level number to go to the next level, but when the correct value is sent it's supposed to redirect to the next level but it doesn't work ...
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
document.location.href = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
document.location.href = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow">
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper"></div>
<div class="level-number-container">
<form method="GET" name="form1">
<input onclick="getVal()" id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
</body>
</html>
To the people that have this problem, Here is the JS, I put a window.onload, it means that it only launch when the page is completely loaded :
window.onload = function() {
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.location.href = "aw3za.html"
}
})
}
document.location has been deprecated for almost as long as JavaScript has existed. Don't use it So use window.location
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
window.location = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
window.location = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
I don't understand why you need trigger onClick function on input box. that function only execute when you click on that. So when you clicking that value is empty. then when you try to perform keyup the value will be empty. Actually you can use document.location.href.
Problem is your arrangement. Try this
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
var nmb = document.getElementById('input').value;
if(nmb == 3){
console.log('in');
document.location.href = "new.html";
}
})
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number">
</form>
</div>
</div>
Several things here:
First you have an extra div closing in the interesting part of your code here:
<div class="level-number-wrapper"></div>
you should erase it.
Second, you don't need to use the function getVal() to add an event listener, you should add it directly.
Last, if you are staying in the same page if unless you change the value to 3 then you don't need the else part of the if.
This being said, this code works for me, check it out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow">
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
document.location.href = "aw3za.html"
}
})</script>
</body>
</html>
I think you can use both location and window but window is a bit better for cross browser safety as stated here:
What's the difference between window.location and document.location in JavaScript?
window.open
Calling window.open function in the listener had made the browser open the tab.
Here is the working code:
1. index.html
<!DOCTYPE html>
<html>
<body>
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.open("aw3za.html")
}
})</script>
</body>
</html>
2. aw3za.html
<!DOCTYPE html>
<html>
<head>
<title> Level 2</title>
</head>
<body>
<h1>AW3ZA</h1>
</body>
</html>
Try to replace
document.location.href
By
window.location

Page redirect and load file into div

I have index.php in which I would like when the user clicks the button "Click" it to redirect to "newpage.php" but also for another page "Click.php" to be loaded into the div "content" within the newly loaded "newpage.php".
Similarly I would like for when "Click Also" is clicked for the user to be redirected to the same page "newpage.php" but a different page "ClickAlso.php" to be loaded into the same div "content".
index.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location.replace("newpage.php");
});
$(document).on('click', '.clickmealso', function() {
window.location.replace("newpage.php");
});
});
</script>
</head>
<body>
<div>
<button class="clickme">Click</button>
<button class="clickmealso">Click Also</button>
</div>
</body>
</html>
newpage.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Try this solution:
index.php
change your document ready event to redirect to newpage.php using url params. For this example I used a parameter named 'page'.
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location = ("newpage.php?page=click");
});
$(document).on('click', '.clickmealso', function() {
window.location = ("newpage.php?page=clickAlso");
});
});
newpage.php
Define what happens once the page is accessed. This is where things get a bit more interesting. Each time this page (newpage.php) loads, it looks for the parameter 'page' in the URL and extracts its value. The parameter's value is then assigned to a variable I called $pageToGet.
After that we check whether the value is equal to 'click' or 'clickAlso' and we display the content accordingly using require.
<?php
$pageToGet = $_GET['page'];
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="content">
<?php
if ($pageToGet == 'click') {
require('Click.php');
} elseif($pageToGet == 'clickAlso') {
require('ClickAlso.php');
}
?>
</div>
</body>
</html>
Be sure to have your files: Click.php and ClickAlso.php in the same directory for this to work.
Good Luck

Calling function from another javascript inside jquery

I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}

Keep selected tab when click on browser back button or mobile back button

I am using below html code for tabs in mobile view
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('a.tab-menu').click(function(){
if ( $(window).width() < 768 )
$('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
});
});
</script>
</head>
<body>
<h2 class="responsive-tab">tab 1</h2>
<div id="tab-1"> content here </div>
<h2 class="responsive-tab">tab 1</h2>
<div id="tab-2"> content here </div>
<h2 class="responsive-tab">tab 1</h2>
<div id="tab-3"> link here </div>
</body>
</html>
My question how can I keep the selected tab if click on any link on selected tab and go to link and when I click on back button should back to selected tab
You can look at the location.hash when the page is ready then trigger a click on that tab when the page is loaded.
$(function () {
// Let's see if there's a hash in the url...
var hash = location.hash;
// If there is...
if (hash) {
// Find the link that has the same href value
// as the hash and fake a click on it...
$('a').filter(function () {
return this.href === hash;
}).trigger('click');
}
});

Have to Click Button Twice to Perform Function - jQuery

For some reason I have to press the button twice to perform the function that it is assigned to, maybe something to do with the fact that there are two click events? However, if I remove the "$(buttonNumber).on('click', function ()" the script breaks.
I plan to use this function for multiple buttons and that's why it has to be in a function.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="test2.js"></script>
</head>
<body>
<button id="button1" onclick="nextSlide('#button1', '#1', '#2')">Hide it</button>
<p id="1">Hide this text</p>
<p id="2">Show this text</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
JS:
window.onload=function(){
$('#2').fadeOut(1);
};
function nextSlide(buttonNumber, hideDiv, showDiv) {
$(buttonNumber).on('click', function () {
$(hideDiv).hide("slide", 2000, function(){
$(showDiv).show("slide", 2000);
});
});
};
You are binding the event on every click. You should just execute the code within your click event.
function nextSlide(buttonNumber, hideDiv, showDiv) {
//$(buttonNumber).on('click', function () {
$(hideDiv).hide("slide", 2000, function(){
$(showDiv).show("slide", 2000);
});
//});
};
The commented parts binds a click event, but you have already done this in your html:
onclick="nextSlide('#button1', '#1', '#2')"

Categories

Resources