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: /
but this doesn't work: /
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=";> 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>
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/1nwaptL9/
but this doesn't work: https://jsfiddle/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."> 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>
- 1 You didn't properly include jquery in your fiddle. And even if you did, you're not using jQuery properly. jsfiddle/j08691/7vkepm9e/2 – j08691 Commented Aug 8, 2017 at 17:07
5 Answers
Reset to default 5jQuery 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube."> click here </a>Sticking with just jQuery:
$("#preventlink").click(function(e) {
e.preventDefault()
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube."> 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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube."> 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube."> click here </a>
<script src="http://code.jquery./jquery-3.2.1.min.js"></script>
</body>
</html>Try this:
$("#preventlink").on('click', function (e)
{
e.preventDefault ();
});