Develop Reference

disable a link after click using jQuery

I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...

Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});

You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});

This works for me:
$('a').css("pointer-events", "none");

In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"

It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>

Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps

$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272

This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});

$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.

If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});

Multiple buttons with the same #id to do the same function?

JS beginner, sorry
How can could I make it so that every button that has the id "#popit" to open the same popup box?
I'm using bPopup
With this code there is only one button on the site which does open the popup
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
http://jsfiddle.net/yg5so25s/ - there are 3 buttons with the same id, but only the first one opens the popup box, anyway I could make it so that every single button to open the same popupbox?

id must be unique, you need to use class instead:
<button class="my-button">POP IT UP</button>
then you can use . to target elements by class name:
;(function($) {
$(function() {
$('.my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Updated Fiddle

use common class for all buttons
$('.commonClass').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
DEMO

jquery .on(click) not working

i have a link on html
Veja aqui »</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically

Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle

If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});

jQuery issue with toggle show hide

I have create custom toggle script to show/hide content but I am getting issue with script.
When I Click to Filter text content will display and when I click to close button again, it will close and re-open. Why this is happening I don't know please some one guide me.
My JSCode:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
My JSFiddle: Sample

The click is bubbling up, so both event handlers are executed.
You need to stop the propagation
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
e.stopPropagation();
$(".rmm2-toggled ul").hide(1000);
});
FIDDLE

hey the problem is that ur close button is inside ur toggle event
use this js code instead:
$(".rmm2-toggled .rmm2-toggled-title").click(function (e) {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
$(".rmm2-toggled ul").hide(1000);
});

A possible solution would be to try this:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000, function(){
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
});
});

Override
<div class="rmm2-toggled-title" >Click to Filter</div>
with this
<div class="rmm2-toggled-title" id="open_filter">Click to Filter</div>
just add ID named "open_filter" which would be unique and close button is not inside this div.
rather adding event to parent div , add click event to its childs
updated Jquery
$("#open_filter").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});

Add hide parameter to script

hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});

Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()

Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden

If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/

DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});