We Keep Coding

Attaching multiple click events without having to repeat myself

Here is the fiddle.
Ignore the styling, that's not important.
Basically I needed to open the Fancybox with two links present, but I only want one gallery image. I figured that out easily enough. When the thumbnail is clicked it triggers the li anchor.
To keep the galleries separate I did unique classes for each ol.
The problem I have run into is I will be repeating myself.
I attempted to do a loop (commented out), but the logic is beyond my grasp.
What is the best way to attach a new click handler (I need to add 8 more) without repeating myself in my current fashion? I've also tried a function with a couple parameters, but I had trouble with the e.preventDefault().
I greatly appreciate any guidance, thanks!

This looks like a great use case to use jQuery's on() method. on() is a method that will allow you to establish a handler on an outer container that can listen to its children for click events. So, for example: if you specified a class of .js-listen on your lists, you could call on() like this:
$('.js-listen').on('click', 'other-selector', function(e){
// function logic with either $(this) or e.target goes here
}
This block would essentially look for all elements with .js-listen and then when something inside the element with the .js-listen class is clicked, the event will bubble up through the DOM and the event will be handled according to the element that was clicked. The second parameter I have 'other-selector' can be a class name, element, or ID. so you could essentially put something like img there and it would fire the event if the child element clicked was an <img> tag.
This prevents you from attaching a handler a million times, and one of the benefits of on() is that if elements are dynamically added to the container with the handler, you don't have to worry about attaching handlers to those elements, because again, they bubble up!
Hope this helps!

dynamically adding a class to parent container from a dynamically added container using jquery

I have a method to dynamically add a container which is attached to the target container . When the action has been performed i removed the action container but now I have to add a class to parent container but problem is it is getting set (class name to parent container ) but it gets removed itself. For more clarification I am adding an sample code
<div class="main">
<ul>
<li>some contents</li>
................
................
</ul>
<ul class="dynamic_container">
<li>actions</li>
................
</ul>
</div>
dynamic_container is added when user mouseover the main class container and this get removed once action has been executed . But now it gets added(class name) but it gets removed too .
I believe this is basically because $(e.target) get removed ....
Any advice/suggestion will be appreciated . Thanks in advance.
edit :
$(e.target).parents('.main').addClass('current'); (this code does not able to add class to .main div) . This code is executed from ul.dynamic_container (which is added to the dom on mouseover on div.main)
edit 2:
jsfiddle link: this is the structure (not the actual code)
http://jsfiddle.net/CASy6/

Thanks for posting the fiddle. Now we can identify some problems that are preventing it from working.
The first problem is that when you try to move the mouse over the buttons, they disappear. If you add some console.log statements to the mouseover and mouseout handler functions, you will see that they get called way too much. This is due to the way these events work in a situation with nested elements.
jQuery provides a good solution to this problem: the mouseenter and mouseleave events. Read about them in the API docs, specifically the section describing the difference between mouseover and mouseenter.
See this fix implemented in this version of the jsFiddle: http://jsfiddle.net/CASy6/1/. With this, you can now actually click on the buttons, and also, a whole bunch of unnecessary .append() and .remove() calls are avoided.
The next problem is that no handler is called when you click a button.
The reason for this is that you set up the handlers by calling e.g.
$('li.first').on('click', function(e){ ... });
when the page loads, but at that moment, the selector li.first matches nothing, because you haven't appended the buttons to one of the divs yet. So handlers are only attached at page load, and they have nothing to attach to.
One solution for this problem is to use delegated events (see docs). This means we attach a handler to a container element (which is always present, including at page load), and handle events that bubble up from a descendant element.
In this case, we can attach a delegated event handler to the .main divs, which handles a click coming from one of the buttons:
$('div.main').on('click', 'button.first', function(e){
$(this).closest('.main').addClass('current');
alert('first action');
});
The second argument button.first is a selector which determines which descendant events will be handled by this handler. (I fixed the appended html so the class attribute is attached to the button element instead of the li element; it was inconsistent between the two buttons.)
See these fixes in action here: http://jsfiddle.net/CASy6/2/

JQuery click anywhere except certain divs and issues with dynamically added html

I want this webpage to highlight certain elements when you click on one of them, but if you click anywhere else on the page, then all of these elements should no longer be highlighted.
I accomplished this task by the following, and it works just fine except for one thing (described below):
$(document).click(function() {
// Do stuff when clicking anywhere but on elements of class suggestion_box
$(".suggestion_box").css('background-color', '#FFFFFF');
});
$(".suggestion_box").click(function() {
// means you clicked on an object belonging to class suggestion_box
return false;
});
// the code for handling onclicks for each element
function clickSuggestion() {
// remove all highlighting
$(".suggestion_box").css('background-color', '#FFFFFF');
// then highlight only a specific item
$("div[name=" + arguments[0] + "]").css('background-color', '#CCFFCC');
}
This way of enforcing the highlighting of elements works fine until I add more html to the page without having a new page load. This is done by .append() and .prepend()
What I suspected from debugging was that the page is not "aware" of the new elements that were added to the page dynamically. Despite the new, dynamically added elements having the appropriate class names/IDs/names/onclicks ect, they never get highlighted like the rest of the elements (which continue to work fine the entire time).
I was wondering if a possible reason for why my approach does not work for the dynamically added content is that the page is not able to recognize the elements that were not present during the pageload. And if this is a possibility, then is there a way to reconcile this without a pageload?
If this line of reasoning is wrong, then the code I have above is probably not enough to show what's wrong with my webpage. But I'm really just interested in whether or not this line of thought is a possibility.

Use .live to "Attach a handler to the event for all elements which match the current selector, now and in the future". Example:
$(".suggestion_box").live("click", function() {
// means you clicked on an object belonging to className
return false;
});
Also see .delegate, which is similar.

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will always propagate to the element to which they are delegated; event handlers on any elements below it will already have been executed by the time the delegated event handler is called.
from the jQuery documentation =)
(only to explain better why #karim79 also suggested the delegate method ;P )

jquery set focus on dynamic content?

In jquery I've appended a <li> element to an unordered list.
How do I focus on the newly created <li> ?
If I do the following:
$("ul").append('<li><input type="text" value="Hi!"></li>');
$("li:last").focus(); //doesn't work because new <li> isn't in dom yet
the focus doesn't work, as noted above.
I know jquery 1.4.2 has a live() event handler which allows you load event handlers to dynamically added elements, but I'm not sure what I'm doing wrong:
$(document).ready(function () {
$('li').live('load', function () {
alert("hi!");
$("li:last").focus();
});
});

You can only set the focus to elements which can hold the focus. By default a list item cannot. This is why your first example fails, not because it isn't in the DOM (it is in the DOM, that is what append does)
In general you should use elements designed to hold the focus (i.e. set the focus on the input not the list item). You can also (but this is less backwards compatible and less logical) use HTML5's tabindex (probably setting it to 0).
onload will not work because list items do not load external content.

You can try this, $(YourElement).trigger("focus").

This is an old post I know, but a simple way to solve this issue is to create a text input in your HTML and set its CSS to "display: none;". On the LI's click event, set the focus in this input and listen to its keypress events.
I've done it and it works like a charm.

jQuery UI Selectables - Start Drag-Selecting from Outside of Objects

I am using the jQuery UI Slectable http://jqueryui.com/demos/selectable/
Once initialized (just like in the demo on that link). drag-selecting only works if I start holding the mouse button on top of a object. If I start drag-selecting from outside of the objects, the selecting does not work.
Is there any way to enable it so the user can initiate the drag-selecting outside of the Selectable objects?

The mouse event listener in the 'selectable' is bound to the wrapper element that you have attached it to. By attaching the it to the body and providing a filter you can get what you're looking for.
Based on the jQuery example:
$('body').selectable({ filter: '#selectable li' });
*Edit:
Unfortunately because of this._trigger("stop", event); it will stop other events on the page.
Your best solution might be to just make the wrapper around the selectables larger.*

This behaviour is already happening, you just can't see it!
Simply adjust the css for your ul.selectable so that it properly contains the floated li's.
#selectable{
overflow: hidden;
}