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

Jquery trigger.click() on buttons not working sometimes

The requirement is simple on my page, When I click one button I want to automatically click a hidden button.
This is what I am using:
(function($) {
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').trigger('click');
});
})
It is working sometimes and sometimes the button is not clicked. I am not sure what is wrong with this. Any help is greatly appreciated.

See this code lines.It works. I see when you use the IIFE you don't pass the jQuery object. Or try to compare with your code lines.
(function($) {
$('#button1').on('click', function(){
console.log('button1');
});
$('#button2').on('click', function(){
console.log('button2');
})
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').trigger('click');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button1'>A</button>
<button id='button2'>B</button>

you could also do this
(function($) {
$('#button1').on('click', function(){
console.log('button1 and button clicked ');
});
$('#button2').on('click', function(){
console.log('button2 clicked');
})
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').click();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button1'>clickme btn1</button>
<button id='button2'>clickme btn1</button>

You can try this also:
$(function() {
$('#button1').on('click', function(){
console.log('button1 clicked ');
});
$('#button2').on('click', function(){
console.log('button2 clicked');
});
$('#button1').click(function(){
$('#button2').click();
});
});
<body>
<button id='button1'>button1</button>
<button id='button2'>button2</button>
</body>

How can I trigger a 'focusout' after I click on an element?

I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?

Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});

You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO

try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/

Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});

Button click event not firing in jQuery

This is the method:
$(document).ready(function () {
$('btnDelete1').click(function () {
alert("something");
})
});
And this is the code for the button:
<input type="submit" value="Delete Role" disabled="disabled" id="btnDelete1"/>
But whenever I click the button, the alert isn't happening. Why is this?

The problem isn't connected with MVC anyway, you missed # in Jquery selector only.
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});
EDIT:
And as mentioned Jeffrey, you forget ; too

Your selector is wrong
It should be
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});

Did you forget a ;?
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});

jquery .bind for image onclick not working in Firefox?

I wonder why the below code works fine in IE but not Firefox (3.6.15)?
HTML:
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
JavaScript:
EnableBuyButton(btbuy1);
function EnableBuyButton(ABtnId)
{
var btElement = document.getElementById(ABtnId);
btElement.setAttribute("disabled", "");
$('#' + ABtnId).bind('click', function ()
{
alert('User clicked buy btn');
});
}

Have a look, I've also done a little tidying up http://jsfiddle.net/bkKNU/
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
EnableBuyButton("btbuy1");
function EnableBuyButton(ABtnId)
{
$('#' + ABtnId).attr("disabled","").bind('click', function ()
{
alert('User clicked buy btn');
});
}

You want to use an id but you are actually using the Html element that is identified by the id,
try
EnableBuyButton('btbuy1');
in stead of
EnableBuyButton(btbuy1);
You can also call the Jquery selector with the element itself
$(btElement)

Try this:
$(function() {
var EnableBuyButton = function(ABtnId)
{
var btElement = $('#' + ABtnId);
btElement.attr("disabled", "");
btElement.bind('click', function ()
{
alert('User clicked buy btn');
});
}
EnableBuyButton('btbuy1');
});
Hope it helps
jsfiddle: http://jsfiddle.net/aPvgm/1/

function EnableButton(id)
{
$('#' + id)
.removeAttr("disabled")
.click(function ()
{
alert('User clicked buy btn');
});
}