I want to prevent a link from taking the user to another page.
When I try to select elements with getElementById("id"), it works fine. When I try to select by using $("#id"), however, it doesn't work. To clarify, this works:
https://jsfiddle.net/1nwaptL9/
but this doesn't work: https://jsfiddle.net/7vkepm9e/1/
I realise both of these fiddles do actually work, but when I load the HTML files in Chrome, the one with the jQuery selection doesn't work. Since the source code I've included below works fine in JSFiddle, but not in Chrome, I suspect I've done something wrong, but JSFiddle doesn't process links or something like that. Any help would be appreciated!
Source code that doesn't work:
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="js/jquery-1.11.3.min.js"> </script>
</body>
</html>
<script>
var link=$("#preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
</script>
jQuery creates a jQuery instance, if you want the actual DOM element, you can do the following:
var link = $("#preventlink")[0];
Or, just keep using jQuery to add events:
$("#preventlink")
.click(function (e) {
e.preventDefault();
});
Getting the element from the jQuery instance:
var link = $("#preventlink")[0];
link.addEventListener("click", function(e) {
e.preventDefault()
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
Sticking with just jQuery:
$("#preventlink").click(function(e) {
e.preventDefault()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
See jQuery's doc on the subject
This is because addEventListener is a javascript function. It's not defined for jquery. For jquery you can use bind function. Below is the sample code
$(document).ready(function() {
var link=$("#preventlink");
link.bind('click', function(e){
e.preventDefault();})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
</body>
</html>
You are mixing jQuery with vanilla JS:
$("#id") -- jQuery
document.getElementById("id") -- Vanilla JS
Try to use either one of them.
jQuery:
$("#preventlink").on("click", function(e) {
e.preventDefault()
})
Vanilla JS:
var link=document.getElementById("preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
Here is a more jQuery way of doing what you are looking for
var $link = $("#preventlink");
$link.on("click", function(e) {
e.preventDefault();
alert("link clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>
Try this:
$("#preventlink").on('click', function (e)
{
e.preventDefault ();
});
Related
html code:
<a id="image1" href="images/1.jpg" class="swipebox" title="My Caption">
<img src="images/1mini.jpg" alt="image" />
</a>
Js code for firing the pugin when user enters with link that ends with '#1'
<script type="text/javascript">
$(document).ready(function(){
if(window.location.hash == "#1") {
$( '#image1' ).swipebox();
}
});
</script>
I figured it out that the js code
$( '#image1' ).swipebox();
works only when I click on the image. But I need that during the page load it would be popuped already.
To open the swipebox on page load; could you please try with following code:
<script type="text/javascript">
$(document).ready(function(){
if(window.location.hash == "#1") {
$( '#image1' ).swipebox();
$( '#image1' ).click();//click the image programmatically
}
});
</script>
I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well
How to fire onclick event when click the image ?
and one limitation is that I can't modify testcode2.html.
now the href properties only work.
please help me :( !!
<script>
function go()
{
alert("Hello World!");
}
</script>
<div href="#" onClick="go()">
<iframe src="testcode2.html" />
</div>
testcode2.html is as follows:
<a href="http://translate.google.com">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>
This might help you http://jsfiddle.net/fjGJ5/
jQuery
$(document).ready(function(){
$(".frame").on('click', call);
});
function call(){
alert("I am called.");
}
HTML
<div class="frame">
<iframe src="http://www.jsfiddle.net/" name="iframe_a"></iframe>
</div>
Give the div an ID and then fire the onClick event using jQuery.
<script type="text/javascript" src="jquery-1.10.2.min.js">
$( document ).ready(function() {
$("#divIFrame").click(function(){
alert("Hello World");
});
});
</script>
<div href="#" ID="divIFrame">
<iframe src="testcode2.html" />
</div>
Move your script on testcode2.html
<a href="javascript:go()">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>
Then make the redirect by javascript after alert
To call a Javascript function defined in parent use window.parent
<a href="http://translate.google.com" onclick="window.parent.go();">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/>
</a>
You might want to stop the redirect in which case add a return false to your go() function and then use onclick="return window.parent.go();"
<script>
window.onload = function() {
document.getElementById("test_frame").contentWindow.document.body.onclick = function(){
alert("Hello World!");
};
};
</script>
<iframe id="test_frame" src="testcode2.html" />
EDIT: If you cannot use getElementById(), querySelector() or getElementsByTagName() may work.
<script>
window.onload = function() {
document.querySelector("iframe").contentWindow.document.body.onclick = function(){
alert("Hello World!");
};
/* document.getElementsByTagName("iframe")[0].contentWindow.document.body.onclick
= function(){
alert("Hello World!");
}; */
};
</script>
<iframe id="test_frame" src="testcode2.html" />
I am learning addEventListener,I was testing one of the example but its not working .Can anybody tell me what i am doing wrong
<html>
<head>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }
document.getElementById("id1").addEventListener("click", click_handler1, false);
document.getElementById("id2").addEventListener("click", click_handler2, false);
//window.addEventListener("load", setup, false);
</script>
</head>
<body>
<a id="id1">some stuff</a>
<a id="id2">stuff</a>
</body>
</html>
Thanks
Your elements are not found because you're executing the javascript before you've added the elements.
Try moving the script to the bottom of the body:
<html>
<head>
</head>
<body>
<a id="id1">some stuff</a>
<a id="id2">stuff</a>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }
document.getElementById("id1").addEventListener("click", click_handler1, false);
document.getElementById("id2").addEventListener("click", click_handler2, false);
//window.addEventListener("load", setup, false);
</script>
</body>
</html>
Move this to the end of the document, or wrap it with an onload function:
window.addEventListener('load',function(){
document.getElementById("id1").addEventListener("click", click_handler1, false);
document.getElementById("id2").addEventListener("click", click_handler2, false);
});
Your code doesn't work because the DOM is not ready yet and you are already trying to fetch id1 and id2.
Your code throws below error in console:
Uncaught TypeError: Cannot call method 'addEventListener' of null
which specifies you need to first define your html element (anchor in this case) and then call methods on it.
What you are doing is - first calling method (addEventListener in this case) and defining the html element (anchor in this case) later on.
<html>
<head></head>
<body>
<a id="id1">some crap</a><br>
<a id="id2">crap</a>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }
document.getElementById("id1").addEventListener("click", click_handler1);
document.getElementById("id2").addEventListener("click", click_handler2);
</script>
</body>
</html>
When I click the link(Anasayfa), function doesn't work. There is no change. What am I doing wrong?
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
function anasayfa() {
$( '.gributon1' ) . css({ "background-color": "red" });
}
</script>
....
<div class="gributon1"></div>
....
Anasayfa
it works http://jsfiddle.net/BeYty/
You need to return false from your link's onclick or the page will refresh since you are clicking on a link to href "" which is the current page.
Anasayfa
Your Div is empty and you can't see it's changes, and the href value of your link must be set to "javascript:void" in order not to refresh the page.
somthing like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function anasayfa() {
$( '.gributon1' ) . css({ "background-color": "red" });
}
</script>
...
<div class="gributon1">..</div>
....
Anasayfa
try by making the following two changes to your code
modify your href to
place some text inside the div
i hope you are placing your code inside the <head>//your script here</head>
<div class="gributon1">some text</div>
Anasayfa
and the script part remains the same
function anasayfa() {
$('.gributon1' ).css({"backgroundColor":"Red"});
}
http://jsfiddle.net/3nigma/BeYty/34/