Develop Reference

Difference between attr('disabled',true) vs unbind('click')

I need to disable a button between the duration when it is clicked and the response arrival. My goal is to stop the onclick function getting executed if someone clicks the button again before the response has arrived.
Which is the correct function to use in this case.
$('#mybutton').unbind('click');
$('#mybutton').attr('disabled', true);

Disable button should be a must for a better user experience (optionally button text can be changed along with a different style), removing only onclick event can't provide good user experience as user can still click on the button which doesn't have any impact. Not necessarily to be followed but it can be an approach: remove onclick (extra cautious) and then disable the button.

$('#mybutton').unbind('click');
unbind() function removes onClick event handler from the selected element.
$('#mybutton').attr('disabled', true);
This code sets a disabled attribute to the selected element. A disabled button cannot be clicked and is usually styled differently.
A preferred way to disallow user to click a button is to make it disabled. If some conditions change and you want to make it clickable, you can remove this attribute and don't need to attach onClick event again.
$(".myButton").prop("disabled", true);
$(".myCheckbox").click(function() {
$(".myButton").prop("disabled", false);
});

It is more appropriate to remove onclick. Disabling the field is not equivalent: browsers may add styling to it and/or not include it in the form submission, should it be submitted.
You may also find that the onclick event fires even when the button is disabled.

Triggering button click in jQuery not working

Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.

We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();

While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here

The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt

You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');

try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/

jQuery Simulate onClick

I am trying to simulate an onclick event on a drop down.
I have an IE object that is going to a page and I need to change a dropdown which has an onchange event:
$('select[name="blah"]').val(3).trigger('change');
$('select[name="blah"]').change(function(){
alert('changed');
});
When I try this, I would expect the alert to fire as it's technically an onchange.
http://jsfiddle.net/3y5hmyf0/
Is there a way to acomplish this?
More Details
My tool is controlling another IE page through an object. It navigates to the page and finds the select drop down on the page. From there, if you did it manually it has an onchange event when making a selection.
I am trying to get jQuery to simulate as if it was being clicked by a person to it triggers that on change event.
I have tried .trigger and .change and couldnt get either of them to work.

The only reason your code does not work is the order you are executing it. You need to connect the handler before triggering it:
JSFiddle: http://jsfiddle.net/3y5hmyf0/1/
// Wire up event handler
$('select[name="blah"]').change(function(){
alert('changed');
});
// Now generate the event
$('select[name="blah"]').val(3).trigger('change');
Note: Your manual change trigger is still required as a change event must normally be triggered by user interaction. Setting the value is not enough.

$('select[name="blah"]').change(function(){
NotifyChanged();
});
function NotifyChanged() {
alert('changed');
}
If you want to test the logic in the changed function, just call it.

Disable bound click event in jquery

I try to disable the binded click event in jquery, but I can found only to unbind or off the event click. If I do unbind() I can't get back those binded functions back.
For eg: I have a three div binded various function with click event. In some case I dont want particular div click event. So I try to disable that event only can't try to unbind() or off() the event. If I unbind() the event from div then again I need to bind those functions back to that div. See fiddle
Is there a way to disable the event and enable back those events without unbinding it.
Thanks in advance.

You can stop event like this:
function handler(e){
if(yourcondition)
e.preventDefault();
else {
}
}

You can give a class name to those div's. And call the click event though this class name like
$(".class_name").click(function(){ });
and when you want to disable the click event then use the id selector to remove the class
$("#div_id").removeClass("class_name");
and when you want to add the click event then then use the id selector to add the class
$("#div_id").addClass("class_name");

in this example
http://jsfiddle.net/prollygeek/WuNGJ/2/
you can remove class pointer from all elements so that no element will respond to any bound action , once you trun back the class , it will respond normally , class binding and unbining can be done by clicking div 1.
$(".element").on('click',function(){
if($(this).hasClass("triggered"))
{
$(".element").addClass('pointer');
$(this).removeClass("triggered");
}
else if($(this).hasClass("pointer"))
{
$(".pointer").removeClass("pointer");
$(this).addClass("triggered");
}
//do whatever
})

Click anchor, and be brought to linked page

I have a anchor on which I trigger a click with JavaScript. Please see this fiddle.
$(function() {
$('a').click();
});
For some reason, triggering the click does not bring me to the page specified by the href attribute of the anchor.
How can I have the click event also bring me to the page linked by the anchor?

It will not work like that, the call $('a').click(); is a short cut for $('a').trigger('click'); which tries to simulate a click action on the anchor element.
But the simulation is not absolute, though it will fire the registered event handler it will not completely simulate a use click trigger the default action.
As per the jquery doc for trigger
Description: Execute all handlers and behaviors attached to the
matched elements for the given event type.
and
Although .trigger() simulates an event activation, complete with a
synthesized event object, it does not perfectly replicate a
naturally-occurring event.
So I don't think it is possible to completely simulate a user action and trigger a redirection using this method

Seems to be something to do with jQuery and the trigger method, works fine when you change [object object] to [object]. Here is the fiddle. Enjoy!
$(function() {
$('a').get(0).click();
});