Develop Reference

how can I check if a particular item is clicked with .blur() in jquery

I have an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});

You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);

Show div upon tabbing into a certain input field

I want to show a date picker when the user gets to a certain input on a form. The datepicker should display if the user simply tabs into the field.
I tried something like this (I'm using Zebra_DatePicker by the way):
var datepicker = $('#date-picker-input').data('Zebra_DatePicker')
$('#date-picker-input').focus(function(){
datepicker.show()
})
That works - tabbing into the field shows the datepicker. However, this breaks the functionality if the user decides to click on the input field in question; when this happens, the click initially opens the datepicker, and then the focus callback function closes it. The result is a split-second flicker where the datepicker is shown then closes instantly.
How can I get functionality for both clickers and tabbers?

The problem is that data('Zebra_DatePicker') returns a reference to the date-picker component and not to the element itself so your focus event binding is performed on the wrong object.
Try this:
$('#date-picker-input').on('focus click', function(e) {
e.stopImmediatePropagation();
$(this).data('Zebra_DatePicker').show();
})

The plugin does not support what you are asking nor does it offer many hooks, so the workaround will be a bit hacky..
If you are working with a single datepicker in the page do
on initialization of plugin
$('#date-picker-input').Zebra_DatePicker({
// what options you already use
// and then add
onSelect: function () {
var datepicker = $(this).data('Zebra_DatePicker');
setTimeout(function () {
datepicker.hide();
}, 1);
}
});
and then add
$('#date-picker-input').off('click').on('focus', function(){
var datepicker = $(this).data('Zebra_DatePicker');
datepicker.show();
return false;
});

.select() not functioning correctly in Chrome

I'll keep it short and sweet. Trying to implement .select in jQuery and it doesn't seem to be cooperating in Chrome. Clicking in to the input selects the contents only briefly.
$(document).on('focus','.a-thing', function () {
this.select();
});
jsFiddle

this is not a jQuery object
$(document).on({
focus : function () {
$(this).select();
},
mouseup : function() {
return false;
}
}, '.a-thing');
FIDDLE
And you have to prevent the mouseup event to avoid loosing the selection as the mouseup event deselects the text, it's a know issue in Chrome.

Probably due to using the focus event. Try to fire the select event after the focus is complete:
$(document).on('focus','.a-thing', function () {
var self = this;
setTimeout(function() {
self.select();
},1);
});
Updated jsFiddle

User click event instead of foucs, because keyboard tab key will auto select field value without foucs event
$(document).on('click','.a-thing', function () {
this.select();
});
JSFIDDLE DEMO

You can active the select on the mouse up instead of the focus. Chrome seems to de-select on the mouse up event.
$(document).on('mouseup','.a-thing', function () {
$(this).select();
});
Or if you want to keep the focus event, you can prevent the action on mouse up
$(document).on('mouseup','.a-thing', function () {
e.preventDefault();
});

On mouseup event the selection is getting unselected, Please add the following to fix the issue
$(".a-thing").mouseup(function(e){
e.preventDefault();
});
DEMO

DropDown.Change will not fire if the user chnage the dropdown values using the keyboard (up & down ) arrows

I have the following script insde my asp.net mvc razor view:-
$("#Server_RackID").change(function () {
var idDC = $(this).val();
$.getJSON("#Url.Content("~/Server/LoadDataCenterByRackID")", { rackid: idDC },
function (DCData) {
var select = $("#Server_TMSRack_DataCenterID");
$("#Server_TMSRack_DataCenterID").val(DCData.Value);
});
});
The script will fire when the Server_RackID drop down is changed , but this chnage should be when the user select a new drop down values using the mouse. while if the user using the (up & down) arrows scroll over the drop down items, then the script will not fire ? so can anyone advice on this please?
Thanks

You need to bind the event to both change and keyup, like this:
$("#Server_RackID").on('change keyup', function (event) {
//Do something
});
JSFiddle here.

fire jquery focus out when only the input focus is changed

I use the following code to add the selected div value into a input.
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
//addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
$('.del').click(function(e){
e.preventDefault();
e.stopPropagation();
//addOrRemoveWatermark(lastFocus);
$(lastFocus).val(function(index, text){
return text.replace(/(\s+)?.$/, '');
});
})
below is a sample image if the input panel I have! This is developed for a touch device and hence the key pad.
The script works fine to add value on each button press in the keypad. The problem I'm facing is for the room number I want to run an ajax call after the user has entered the amount. But since the focus is removed every button click, how can I run the script when the focus is changed to another input. I tried the jquery .focusout() method but it gets fired each and every time the user clicks on a number button.
if anyone can suggest me a work around that would be a great help!
thank you!

Perhaps you could delay the request with something like the following:
var roomNoChanged = false;
$('#room-number').change(function() {
roomNoChanged = true;
});
$('#table-number, #no-of-guests').focus(function() {
if(roomNoChanged) {
roomNoChanged = false;
$.post(...)
}
});