Develop Reference

How to get data attributes of the clicked element on focusout

As the title says, I'd like to know if there is a way to get the data attributes of the element being clicked on during a focusout event.
My page produces search results in a small div on the side when the user types into the search input.
The problem is that when the focus is lost from the input, I want the search results to disappear.
I wrote the following code to accomplish this.
$('#chat-search').focusout(function(){
$('#chat-search').val(""); //Search input is cleared
$('.search-results').hide(); //The search results div is hidden
$('.people').show(); // Shows the previous div that was taken up by the search results
});
The problem is, I need to get information from the clicked div contained within the search-results class. The div that contains the data has the search-person class and there are many of them within the search-results div.
$('body').on('click', '.search-person', function(){
var userId = $(this).attr("data-id");
console.log(userId);
$('#chat-search').addClass('center-text');
$('#chat-search').val("");
$('.search-results').hide();
$('.people').show();
});
The search-person click function does not fire because the focusout event has hidden the element that was clicked. Focusout always appears to trigger before the on click event.
I tried to fire a normal on click event so that when the user clicks on anything that is not the search results or the input, the same code is executed as in the method above. This workaround is not perfect though, as it does not trigger if the search input loses focus because the user pressed tab.
$('body').on('click', function(e){
if ($(e.target).is($('#chat-search'))){ // If the search input is selected
$('#chat-search').removeClass('center-text');
$('.search-results').val("");
$('.people').hide();
$('search-results').show();
}
else if (!($(e.target).is($('.search-person')))){
// If the selected element is neither the search input nor the search result
$('#chat-search').addClass('center-text');
$('#chat-search').val("");
$('.search-results').hide();
$('.people').show();
}
});
Is there any way to find out the data attributes of the clicked element on focusout when the elements are going to be hidden when the input loses focus?
The HTML looks like this
<div class="search-container">
<input id="chat-search" class="chat-search center-text" placeholder="Search Users">
</div>
<div class="user-container scrollbar">
<ul class="people">
</ul>
<ul class="search-results">
</ul>
</div>
And within the search results ul, results with this HTML are generated through an ajax request.
<li class="search-person" data-id="someId">
<div class="search-left">
<img class="search-image" src="someurl">
</div>
<div class="search-right">
<div class="search-name">
Text here
</div>
</div>
</li>

I managed to solve the problem by setting a timeout for the focusout event, so that the click event could fire before the search results disappeared.
If anyone has this issue in the future, here is how I solved it.
$('#chat-search').focusout(function(){
setTimeout(function(){
console.log("focus out!");
$('#chat-search').addClass('center-text');
$('#chat-search').val("");
$('.search-results').hide();
$('.people').show();
}, 300)
});

Display the selected/active link in a div using jQuery

I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).
I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.
I hope that makes sense.
This is the HTML menu
<div id="mgf_165" class="mg_filter mg_new_filters">
<a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)">Bathrooms Sinks</a>
<a id="164" rel="164" class="mgf_id_164 mgf left_menu" href="javascript:void(0)">Bowed</a>
</div>
This is the jQuery and the div where I wanna display the text values.
<script type="text/javascript">
jQuery(document).ready(function(){
console.log('test');
jQuery("a.left_menu").click(function(){
var txt = jQuery("a.left_menu").text();
//$(this).attr('rel');
jQuery("#category").append(txt);
});
});
</script>
<div id="category">
</div>
At the moment when I click on, say, "Bowed", this displays in the div
Bathrooms SinksBowed
And if I click again on "Bathroom Sinks", the same thing repeats
Bathrooms SinksBowedBathrooms SinksBowed
How can I deal with that? And did I follow the correct logic here?

You are currently getting the text of all the menu items and then appending it to the div.
You need to get the text of the clicked menu item, and then set the content of the div to the text value of that menu item.
jQuery(this) // the clicked menu item
jQuery('#category').text('VALUE') // set the text content of the tag to VALUE
Working solution on JSFiddle..
See Inside the Event Handling Function to learn more about jQuery event handling.

Select using "this" keyword using document.on(..) - Jquery

My html code ( which is fetched from a json file after the page is loaded ):
<div class="fooditem">
<select class="quan">
<option value="0">0</option>
</select>
</div>
My javascript/jquery code :
$(document).on("click", ".fooditem", function() {
$(this).find('.quan').click();
});
I want to to click the select option tag when i click the div.
I found that the this keyword, here, is representing the document not the particular class.
So how should I go about doing it?
Here is the link

First Problem:
You are getting an infinite loop by listening to click but then generating a click on a descendant element...
The only solution to that is:
Move the child element outside of the element catching the click.
Note: You cannot block the click handler of the select or it will stop working.
As an alternative you can however do one of the following:
Set focus on the select element
Change the value of the select element
Generate a change event on the select element (as if the element was chosen)
but you cannot get the select to simply pop open and select the item.
Examples below:
1) Set focus
$(document).on("click", ".fooditem", function(e) {
$(this).find('.quan').focus();
});
2) Change the selected value
$(document).on("click", ".fooditem", function(e) {
$(this).find('.quan').val(0); // or whatever value
});
3) Generate a change event on the select element
$(document).on("click", ".fooditem", function(e) {
$(this).find('.quan').trigger('change');
});
note: This can be done with or without a prior value change.
Note: You have said in comment "i just want the drop down to open and select the value when i click on div", but this will not happen. A click event will not trigger opening of a select. See this example which has the recursion avoided (the elements are not nested): jsfiddle.net/TrueBlueAussie/zgub3838/7

You are binding your onclick event to the document. Try changing your jQuery snippet to this:
$(".fooditem").on("click", function(e) {
e.preventDefault();
$(this).find('.quan').click();
});

JavaScript: Toggle between 3 elements, only one is active

I just started with JavaScript and have a small question. On my website I have three div-elements:
<div id="id_1" class="class_1" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_2" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_3" onclick="itemSelected('id_3')"></div>
I added the following script to highlight the one that the user has clicked:
var selected = false;
function itemSelected(element) {
if (selected == false) {
document.getElementById(element).style.backgroundColor = "#f5b03d";
selected = true;
}
else {
document.getElementById(element).style.backgroundColor = "#99d4e5";
selected = false;
}
}
So far, this works and the user clicks an item and it gets highlighted in another color. If he clicks it again, it gets his default background color. But as soon as the user clicks one of the other items, it gets highlighted too. What I want is a single-choice functionality: As soon as the user clicks one item, the other too appear in their default background-color. Can someone help me with this problem?
Thanks in advance!

Add a shared class to each element.
When the user clicks an element use that shared class to set the default background color to all three elements.
Then use the element's unique ID to set the highlighted background color to the element that has been clicked.

<div id="id_1" class="class_0" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_0" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_0" onclick="itemSelected('id_3')"></div>
function itemSelected(element) {
$('div.class_0').css({'background-color':'#99d4e5'});
document.getElementById(element).style.backgroundColor = "#f5b03d";
}
Change the html as above and use this jquery

You can do this without using javascript, created a fiddle for this:
http://jsfiddle.net/6PUwz/
What I have done is, making the divs focusable by setting tabindex="-1" and doing the selection by the use of the css-pseudo-class :focused.
Check if this fits you requirements.

Removable Checklist Items

I am trying to create an interactive to do list in which I enter text into a text box, click a button, and it adds the items underneath. So far I have successfully been able to add items to my list using the button but am not able to remove one item at a time by clicking on it, which is what I would like to be able to do. (Ideally each item would have a check box next to it and when I click that the item would disappear). So far, using the .remove() action I have only been able to make ALL of the items in my list disappear by clicking. I did some research and thought that the .on() action may be what I need. I tried it and now I cannot make items disappear at all. This is my code:
$(document).ready(function() {
$('#button').click(function() {
var toAdd=$('input[name=checkListItem]').val();
$('#item').append.('.list');
});
$(document).on('click','item',function() {
$(this).remove();
});
});
Is there anything that stands out as being incorrect? Or is there a better way to go about this? I am brand new to this and appreciate any and all feedback.Thank you!

I forked your fiddle, with corrected code: http://jsfiddle.net/XEDHJ/2/
Here's where you were having trouble:
$('.list').on('click','input',function() {
$(this).parent().remove();
});
Using on was the right idea, it's perfect for this situation. The way you use on is that you have a parent node, in this case a div with a class of list, and a number of matched child nodes, in this case any element that is an input underneath your parent node. Child nodes are denoted by the selector in the second argument. This will match any input node under your div even if they are created after the page is rendered.
Because I wrapped your input in a <div> tag, we actually want to remove that parent <div>. So we call $(this).parent().remove().
I left my original example below but this should be sufficient to get you going.
It looks like something like this is what you're looking for:
Fiddle
http://jsfiddle.net/Khesy/
JavaScript
$(document).ready(function() {
$('#button').click(function() {
$('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
});
$('#item').on('click','input',function() {
$(this).parent().remove();
});
});
HTML
<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>