Disable click if class ="X", jQuery - javascript

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

Related

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.

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

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();

jQuery on(click) doesn't work but on(hover) does

After initialize js I create new <div> element with close class and on("click") function doesn't work.
$(document).on('click', '.post-close', function () {
alert("hello");
});
but on('hover') work perfectly.
$(document).on('hover', '.post-close', function () {
alert("hello");
});
but I need to make it work on click.
It's because you're not preventing the default behaviour of the browser. Pass e into your handler and then use e.preventDefault()
$(document).on('click', '.post-close', function (e) {
e.preventDefault();
alert("hello");
});
Edit
Also, bind the handler before creating the new <div>
why not use something like
$('.post-close').click(function(){
//do something
});
If the element was added dynamically use:
$(document).on('click', '.post-close', function(){
//do something
});
edit:
like danWellman said, you can add the preventDefault IF you want to make sure no other code is executed. otherwise use the code above.
edit2:
changed the .live to .on
It's an old post but I've had a exactly same problem (element created dynamically, hover works, but click doesn't) and found solution.
I hope this post helps someone.
In my case, I found ui-selectable is used for parent element and that was preventing from click event propagate to the document.
So I added a selector of the button element to ui-selectable's 'cancel' option and problem solved.
If you have a similar probrem, check this
Try turn of libraries for parent element
You're not using stopPropagation() in parent element ?

hiding DIV when clicking away from it

Im basically trying to make a simple dropdown menu with html, css and jquery
and im having trouble with closing the div when a user clicks away from it.
i've tried stopPropagation and binding an action to the document when clicked, they either do not work or I have no idea how to use them. anyway have a look at the code below
HTML
<div id="optionsMenu">
Account Settings
</div>
JQuery
$('.options').click(function(){
if($('#optionsMenu').css("display") == 'none'){
$('#optionsMenu').slideDown("fast");
}
else{
$('#optionsMenu').slideUp("fast");
}
});
$('#optionsMenu').blur(function(){
$('#optionsMenu').css("display","none");
});
any help would be much appriciated.
You should use stopPropagation:
$(body).click(function(e)
{
$('#optionsMenu').slideUp('fast');
});
$('#optionsMenu').click(function(e)
{
e.stopPropagation();
});
You could use on(), perhaps:
$('body').on('click', function(e){
if ($(e.target).not('#optionsMenu')){
$('#optionsMenu').slideUp('fast');
}
});
The above not yet tested, but should, I think work.

Handle Conflicts Between Document Click and Element Click

So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.
This is the dropdown code:
function dropdown(){
$('#smenubutton').click(function(e){
var submenu = $(this).find('.submenu');
if (submenu.is(':visible')){
submenu.hide();
}else{
submenu.show();
}
});
}
however, a code like this:
$(document).click(function(e){
e.stopPropagation();
$('.submenu').hide();
});
will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can't find any questions based on my needs) and close this question.
You should check if e.target is the submenu and hide the submenu only if it's not (in this case i check if it has the class submenu)
$(document).click(function(e){
if($(e.target).hasClass("submenu")){
$('.submenu').hide();
}
});
Since you mentioned "outside the browser", try this: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
EDIT: Since OP edited the question, I'll edit the answer:
$(document).on('click', '#submenu', function(e) {
e.stopPropagation();
// show or hide the submenu here
});
$(document).on('click', function(e) {
// hide submenu here
});
example: http://jsfiddle.net/A3SfP/
Try on blur() or focusout():
$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });
If it doesn't work try giving your menu an explicit tabindex.

Categories