Disabling <a href=""> inside a <div> using jquery - javascript

Am trying to disable a hyperlink present inside a div tag using Jquery, i used the below codes, which are not helpful.
JQuery - 1.7v
html Code -
<div id="content">TESTING PURPOSE <(a)> href="/test/">Click Here <(a)> End </div>
jQuery - JS
$('#content').find("*").prop("disabled", true);
$('#content').prop("disabled", true);

You can do this :
$('#content a').click(function(){ return false });
Returning false from the click event handler prevents the default behavior (following the link).
If you may have more than one link but you want to disable only this one, you may be more specific in your selector :
$('#content a[href="/test/"]').click(function(){ return false });

Use preventDefault to disable the default behavior of a link.
Here is a little Code snippet:
$('#content a').click(function(e) {
// stop/prevent default behavior
e.preventDefault();
// do other stuff...
// e.g. alert('Link is deactivated');
});
Here is a little jsFiddle example
Difference between e.preventDefault and return false
Source: Stackoverflow - jquery link tag enable disable

$('#content a').click(function(e) {
e.preventDefault();
});

$('.modal-body a').css({"pointer-events":"none"});

You can also do this, just give div name of that anchor tag with remove function.
$('.div_name a').remove();

Related

How to call click() for element?

I am using a lightgallery plugin where the click event is defined as:
$(document).on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
event.preventDefault();
});
However, when I try to call the event like this:
$(".catalog-content a[data-lightbox='test']").first().trigger('click');
... it doesn't seem to work. What am I doing wrong? How can I trigger the click event?
Example jsFiddle
To "simulate a click" using jQuery, you are correct in that you can just use the .trigger(...) method:
$(".myClass").trigger("click");
The real issue is that you are "clicking" something that doesn't exist. There is no ".catalog-content a[data-lightbox='test' element. As Velthune suggests, you can add the .catalog-content class to the div container to fix this; however, note that there also is no a[data-lightbox='test'] element.
Instead, in your Fiddle you define the following:
<a href="http://..." data-lightbox="350xi" id="test">
something
</a>
So you actually just want to click on the first a element with a data-lightbox attribute of "350xi":
$("a[data-lightbox='350xi']").first().trigger("click");
Hey i have gone through the jsfiddle and updated it please go through it..
$(document).ready(function() {
$(".cars-container a[rel!='']").click(function() {
var rel = $(this).attr("rel");
$(".cars-container a[data-lightbox='" + rel + "']:first").trigger('click');
});
});
click below jsfiddle link to see the working example:-
http://jsfiddle.net/wHJ8E/3/
Your code in fiddle can't work.
1) Either use a different selector as Devendra suggested.
2) Or add the .catalog-content class to the div container:
<div class="cars-container catalog-content">
Fiddle
3) Both Devendra and I can't understand.

Jquery: change css selector on click

I just get {"error": "Please use POST request"} when I run this
$("#ricomporreclick").click(function () {
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
});
What's wrong with the code? I'm tring to change the selector without page being reloaded.. when the click is triggered #film should be display:none and #ricomporre should be visible.
http://jsfiddle.net/8Ndba/
just put return false at end of the code block.
Updated Your Fiddle
Try to use event.preventDefault() to prevent the default functionality of the anchor tag,
$("#ricomporreclick").click(function (e) {
e.preventDefault()
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
});
DEMO
Change your anchor so the URL doesn't do anything:
HERE
DEMO
You need to stop the link from redirecting by using the preventDefault method. I've edited the fiddle to show this
$("#ricomporreclick").click(function (e) {
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
e.preventDefault();
});
What was happening previously was that it was correctly changing the visibility, but then the link was reloading the page causing the css to be reset to the stylesheet.

jQuery function run when clicking on anchor with a specific value

I would like a function to run when a specific anchor with the `value="frb" is clicked.
This is the anchor
Accept
this is what i tried:
$('body').on('click', value[frb], function(e) {
e.preventDefault();
});
this doesnt work, i cant find any examples that use this, is it possible?
value is not valid attribute to anchor tag. Instead of that you can use data-value like following:
HTML
Accept
jQuery
$('body').on('click', 'a[data-value=frb]', function(e) {
e.preventDefault(); // prevent page reload
alert( this.href );
});
Working sample
Note:
Already #Musa mentioned about data attribute, but in his jQuery snippet used a[value=frb] which will not work.
The second parameter of .on() should be a selector string
$('body').on('click', 'a[value=frb]', function(e) {
e.preventDefault();
});
also a tag doesn't have a value attribute, you should use a data attribute instead
Accept
try this:
$(function(){
$('a[value=frb]').click(function(e) {
e.preventDefault();
});
});
It assigns the function to all anchors with the specified 'value' attribute.
working demo http://jsfiddle.net/KQy36/
OR http://jsfiddle.net/WP7JS/
API: http://api.jquery.com/on/
Oh by the way: http://www.w3schools.com/tags/tag_a.asp (To see valid a tag attribute)
Anyhoo, Hope this helps,
code
$('a[value="frb"]').on('click', function(e) {
alert('yeah wha?');
e.preventDefault();
});​
OR apart of another post below mine. :)
$('a').on('click', function(e) {
if ($(this).attr("value") === "frb") {
alert('yeah wha? I am frb');
e.preventDefault();
} else {
alert('not frb');
e.preventDefault();
}
});​
Since there is no value attribute for the link tag we need to make a change to the html:
<span class="frb">Accept</span>
Then add this to register the click event.
$(document).ready(function(){
$('span.frb').click(function(e) {
e.preventDefault();
});
});

Disable click if class ="X", jQuery

Im trying to build a tabbed content box, and im wondering if its possible that i can disable 1 link with a specific class, such as 'disabled'
I read somewhere about a function called preventDefault, would this work?
http://jsfiddle.net/Ssr5W/
You can disable click event by returning false. like,
$('#tabmenu a').click(function() {
return !$(this).hasClass('disabled');
});
Also, I've updated your fiddle: http://jsfiddle.net/Ssr5W/1/
EDITED
and of course, preventDefault would work :)
$('#tabmenu a').click(function(e) {
if($(this).hasClass('disabled'))
e.preventDefault();
});
fiddle: http://jsfiddle.net/Ssr5W/2/
$('.disabled').click(function(e) {
e.preventDefault() ;
}) ;
You can just check for the class on the element that was clicked on:
$('tabElement').click(function(){
if(this.hasClass('disabled'))
return;
//Your code here..
);
This won't interfere with other clikc-handlers you may have on your tab element

Avoid window jump to top when clicking #-links

I've got a page with some questions and answers, the answers are collapsed by default. When they click the question I expand the hidden answer-div. The problem is that when I click these questions, the window jump to the top of the screen. This is not a huge problem, but I find it annoying, because I have to scroll down to the question again.
The links simply looks like this:
Myquestion
And I've used jQuery and .click as event-listener.
Are there any simple ways to avoid this, or do I have to use .scroll and finding the coordinates of the question? I'd rather avoid this.
EDIT: I know that I can use anchors to do this, but I'd like to avoid any jumping of the screen at all.
You need to add preventDefault() to your click handler. This will stop the browser executing it's own link handler, and will only run the code you specify.
Example:
$("#myID").click(function(e) {
e.preventDefault();
// Do your stuff
});
Don't use A tags for tasks that are not navigation-related. It is not semantic markup, and doesn't degrade gracefully. Use buttons instead.
You can do it very simple:
Just add ! in the end of your href:
Myquestion
The alternative jQuery ways are:
$("#myID").click(function(e) {
e.preventDefault(); // one way
return false; // second way prevent default click action from happening
});
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
e.preventDefault()alone did not work in older versions of IE.
Actually, the easiest way to do this is to remove the href attribute from your anchor tag. As of HTML5, anchor tags don't need to include href attributes to be semantic.
So
<a id="myID">Myquestion</a>
instead of
Myquestion
This works in IE8+, Chrome, and Firefox. Note that :link css styles won't apply to anchor tags that don't include href attributes.
If you need the href attribute and/or IE7 compatibility, then
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
is probably the best way to go.
$('a').click( function() {
if ($(this).attr("href") == window.location.hash) {
event.preventDefault()
}
});
You are looking for event.preventDefault (see jQuery API).
$(...).click(function(e) {
e.preventDefault();
// your code
});
Example with nice scrolling to answer content:
$("#question_title").click(function(){
var $answer=$("#answer");
$answer.slideDown();
$.scrollTo( $answer, 800 );
return false;
});
I'm used jQuery scrollTo plugin.
Inside your function of:
And I've used jQuery and .click as event-listener.
Will look something like:
$("#myID").click(function(){});
Change this to (don't forget the param e inside function(e):
$("#myID").click(function(e){
e.preventDefault();
});
$('body').on('click', '[href^=#]', function (e) {
e.preventDefault()
});
if the selector ex.."body" is there during the initial render then use the any selector .. id ... to target the general to have jQuery (as of 1.8.2) iterate over. the "On handler invoke a method called "bind" which is used for newly added content to the DOM",. Using the "[href^=#] will select any href that are in the section tag but you can replace section with anything or nothing and it applies a cancellation to the click event. This technique is great for dynamically created content to the DOM
If you add a "\" to the "#" it will prevent from going to the top.
Myquestion
HTML:
<a id="like-post" href="#\">like</a>
JavaScript:
$('body').delegate('#like-post','click',function(e) {
e.preventDefault();
.....
});

Categories