We Keep Coding

.click() event operating on <span>?

I want to trigger a click event on a span but it's not working. I tried both of the following:
$('#my_span').click();
$('#my_span').trigger("click");
But then I tried:
$('#my_span').focus();
And this worked! Anybody know why? I am not trying to bind a handler, just trying to trigger the click event like an user clicking on that span. Please help.

Try triggering click on the DOM element instead of on the jQuery collection of the element:
$('#my_span')[0].click();
Or:
document.getElementById('my_span').click();

Does your span hold any information? Is is a 0px by 0px element? If that's the case the click will never be triggered.
For instance, if you look at a font-awesome icon inside a <span> or <i> it will never be triggered since it has nothing to click.

//EDITED BECAUSE I CANT READ PROPERLY ^^//
I would chain up two event handlers
$(document).on("event you desire","desired target", function() {
$("#my_span").trigger("click");
});
then:
$(document).on("click","#my_span", function() {
//stuff to happen
});
http://jsfiddle.net/vvt8Lvvu/ - jsfiddle for demo

Blur event not works for div

Here is my code below I'm trying to hide addstuff id div when clicked out of it. I tried body click event but it was useless. So I need a trigger event like blur. But It doesn't work for both blur and focusout events.
$(document).ready(function() {
$('#addstuff').blur(function () { $('#addstuff').fadeOut() })
})

There is no blur event for div. You can create that effect using the click event of body.Note that you should exclude that div from the click event
$(document).ready(function () {
$("body").not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
});
Fiddle
Edit
As #TrueBlueAussie suggested, it would be better to use document instead of 'body' for the click event handler:
$(document).not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});

There's no way you can use .blur with a div, it has to be with some input field.
You can always use mouse events like
$(document).ready(function(){
$("#addstuff").mouseleave(function(){
$(this).remove();
});
});
http://jsfiddle.net/asrF2/
You can also use the HTML5 global attribute contenteditable (don't forget to set it true or false)
<div id="#addstuf" contenteditable="true">bla bla</div>
I don't recommend this that much, because of mobile browsers' compatibility.

divs have no focus and blur events, but you can add a contenteditable attribute so that you can type in that div, so the blur actually gets fired:
<div id="addstuff" contenteditable></div>
Then your jquery code works.
You can add additional functions to prevent people from actually typing in that div.
Alternatively you can use the .mouseleave() or .mouseout() event.

div element cannot be focused on so the blur function of jquery cannot be applied to it. See existing answers from our Stack Exchange buddies below for elements that focus can be applied on.
Which HTML elements can receive focus?

jquery offclick?

I have a 'li' that pops down when I click on a 'link' via jquery's 'click'.
Does anyone know of a clean way to do something along the lines of 'offclick'? As in, when I click off of the element, it would hide the pop down?
Thanks!
Matt

You would want to assign a click listener to the window and also assign the click listener to your link. Inside the link click listener, you'll want to stop the event propagation so it doesn't travel up the DOM tree and fire your window's click listener.
Something like this should do the trick:
$(window).click(function(){
$('li#my_li').slideUp();
});
$('a#my_link').click(function(event){
try
{
event.stopPropagation();
}
catch(err)
{
// IE does it this way
window.event.cancelBubble=true;
}
$('li#my_li').slideDown();
});

I guess you could look at blur, which is called when the element looses focus:
ref: http://api.jquery.com/blur/

You can use blur or focusout depending on your needs

can someone explain how this stopPropagation works?

I was trying to setup this "when you click outside of the element, close it" type of thing using some code I found on Stackoverflow:
$(document).click(function() {
$('.list-to-hide').hide();
});
$('.show-list-button').click(function(event) {
event.stopPropagation();
});
Could someone explain the later part with stopPropagation? I don't understand why it's needed.
Thanks!
Matt

Imagine this:
<div>
DIV
<span>
Span
</span>
<div>
and:
$('div').click(function() { alert('div clicked'); });
$('span').click(function() { alert('span clicked'); });
Check out what happens when you click each one
When you click the span, it happens to also trigger the div because your also clicking the div.
Now if we wanted to alert the span only we need to stop the div click from triggering when we click on the span so we do this:
$('div').click(function() { alert('div clicked'); });
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); });
See what happens now

Your example code is missing a vital part:
$(document).click(function() {
$('.list-to-hide').hide();
});
$('.show-list-button').click(function(event) {
event.stopPropagation();
$('.list-to-hide').show();
});
Without the event.stopPropagation(), it would show the list, and then hide it because the .show-list-button is inside the $(document) so both click handlers would fire. event.stopPropagation() basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.
Think about it this way - you rent a taxi for $100. The driver gives his company $80. event.stopPropagation() is like telling him to keep all $100 because the company doesn't need to know anything about the ride.

event.stopPropagation(); prevents the event from bubbling up the DOM. Without this line, clicking on .show-list-button the click handler for document will fire also. With it, the document click will not fire.

Have you read this ?
http://api.jquery.com/event.stopPropagation/
It prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Example
Kill the bubbling on the click event.
$("p").click(function(event){
event.stopPropagation();
// do something
});

Is it possible to have jQuery.click trigger on the top element only?

I'm trying to make a site where the user can click on any element to edit it's CSS. I use the following to add the click function to all <li>, <div> and <ul>.
$('li,div,ul').click(function () {
alert(this.id);
});
The problem is if I click on a <li> element, then I get the alert for that and any element underneath it. (all the containers).
Is it possible to have only the top element trigger when clicked?

You want to stop event propagation, you do this in jQuery by calling the stopPropagation method on the event object.
$('li,div,ul').click(function (e) {
e.stopPropagation();
alert(this.id);
});

I believe you'd want to use stopPropagation(); inside the click function.

It sounds to me like you're looking for .stopPropagation(). Calling stopPropagation will prevent the event from "bubbling" up to parent containers.