Develop Reference

What is the need of .trigger("Change ") in this code

$("#pass").val("").trigger("change");
$("#pass_con").val("").trigger("change");
What s the use of using trigger statement here

On change event occurs when user enters values manually, i.e. events initiated by user and not the JS code. Setting the value using .val() do not trigger change event.
Thus,.trigger("change"); or .change(); needs to be used for triggering change event attached to it.

May be there are change listeners registered on #pass, #pass_con elements.
Changing the value of these nodes programatically will not trigger a change event.
Manually triggering the change event for the listeners to be notified.

Programmatically changing checkbox does not fire change event

I have the following code here:
$('input[type="checkbox"][id="gridlines"]').change(function () {
alert('hello world');
});
$('#gridlines').prop('checked', true);
When I load my page, the checkbox is checked, but the "hello world" does not get prompted.
However, when I click on the checkbox manually, "hello world" gets prompted.
What gives?

You need to call change() or use trigger() to tirgger the change event when values is changed through code.
Using .change()
$('#gridlines').prop('checked', true).change();
Using .trigger()
$('#gridlines').prop('checked', true).trigger("change");

That is how it is suppose to work, only user interaction is support to trigger the change event
You can trigger it manually using .change()/.trigger('change');
$('#gridlines').prop('checked', true).change();
change
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.

Focus event on jQueryUI datepicker

I want to handle focus event on input element with attached Datepicker to save original value.
Unfortunately it seems that any click on popup elements like next month button also generates focus events on input. They look exactly like real focus events from input.
See this fiddle.
<input id="dt" type="text"></input>
and
$("#dt")
.datepicker()
.on('focus blur', function(e) {
console.warn("!%s", e.type, this, arguments[0], event);
});
How can I handle only real focus events while ignoring the rest ?

If I understand correctly what you want to do, you can keep some state in your event handler. When you get a focus event, set a datePickerOpened flag to true and only do your thing when that flag was false when the event was received. Then, set datePickerOpened to false when you get the blur event.

Determining whether focus was received as result of a click event

I have an <input> element that can either have the focus set via code, or as the result of a mouse click.
If the user clicks on the input, then the click event handler will fire - all well and good. If the element receives the focus via some other way (e.g. via code) then I want to manually trigger the click event so that the handler will also fire.
I could do this:
$elem = $('input');
$elem
.on('focus', function() { $(this).trigger('click') })
.on('click', function() { alert('Clicked!') });
However, this will result in click handler being fired twice; once for the click event and once for the focus event.
Is there any way to selectively trigger the click handler only if the focus was not received as the result of a click event?
UPDATE
This is a very simplified version of my problem, so I can't do things like bind both handlers to the focus event etc. I'm trying to merge two third-party pieces of code.

The .trigger() function adds a property isTrigger in the event object to identify that the event was triggered by its usage. Although, it is not documented the property is still present in jQuery 1.8.3 but it seems to only be used internally.
Anyways, you can make use of the extraParameters parameter to add a custom property to the event object. For instance,
$(this).trigger('click', {
isTrigger: true
});
It will keep the compatibility with isTrigger even if it is gone in a future release.

After doing some more research it appears that there is no way of guaranteeing which event will fire first: click or focus. (There doesn't seem to be a standard that dictates the order of events.)
This means that when the focus event fires there's no way to determine if a click event will or will not be triggered by the browser shortly afterwards.
I managed to solve the issue by using setTimeout() to run a test about 100ms after the focus event fired to check if the click event had fired. The third-party code that I was using (bound to the click event) added an extra class to the <input>, so I was able to check for that.

You can tap into the mousedown event which fires before the focus event. When you click a focusable object the order of events is as follows... mousedown, focus, mouseup, click.
You could set a flag in the mousedown event and then check for it in the focus event to see if the focus came from a mouse click. Obviously make sure to clear the flag in the focus event handler. Every application is different, but tapping into the mousedown event allows you to figure out a solution.
Here is a JSFiddle demonstrating the order of events... http://jsfiddle.net/ek7v7/

$elem = $('input');
$elem
.on('focus', function() { alert("Focused!") })
Focus can be fired by focusing the input by using tab, clicking it, or by using .focus()
Is there a reason for on('click', ...)?

Why does dynamically changing a checkbox not trigger a form change event?

I wrote this snippet of javascript/jQuery to change a check box.
http://jsfiddle.net/johnhoffman/crF93/
Javascript
$(function() {
$("a").click(function() {
if ($("input[type='checkbox']").attr('checked') == "checked")
$("input[type='checkbox']").removeAttr('checked');
else
$("input[type='checkbox']").attr('checked', 'checked');
return false;
});
$("input[type='checkbox']").change(function(){
console.log("Checkbox changed.");
});
});​
HTML
<input type="checkbox" />
Change CheckBox​
Interestingly, clicking the link alters the text box, but does not trigger the form change event that calls the function that logs a message in Chrome Web Developer Console. Why? How do I make it do that?

You need to trigger the change event, .trigger('change'), so that event knows that a change took place.
From http://api.jquery.com/change/:
Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
Demo:
http://jsfiddle.net/nPkPw/3/
Using chaining: http://jsfiddle.net/nPkPw/5/
i.e. $("input[type='checkbox']").trigger('change').attr('checked', 'checked');

This isn't surprising, but I guess you could as this to the list of non-effect in the msdn.
"This event is fired when the contents are committed and not while
the value is changing."
"The onchange event does not fire when the
selected option of the select object is changed programmatically."
You could always just .click() it jsFiddle