We Keep Coding

jQuery hover functions stacking on top of eachother

I have rows in a table containing buttons that when clicked, change the hover function of the tr element they are contained in. I just noticed that when I set the hover function it doesn't actually rewrite over the previous hover function, it just stacks on top of it. So when the hover event fires it calls the most recently set hover function as well as any previous ones that have been set. How can I reset the hover function each time I set it instead of stacking them?

As Mohit Bhardwaj mentioned, the solution is to use the jQuery unbind method.
Note that simply calling $("#id").unbind("hover") will not work. It must be in the form of
$("#id").unbind('mouseenter').unbind('mouseleave')
or more simply
$("#id").unbind('mouseenter mouseleave');
How do I unbind "hover" in jQuery?

preventDefault not working cycling through <li>s that have been moved

I have a slider and I've organized it into a <ul> with the <li>s as the individual items to cycle through. Only the second <li> is visible, and if you scroll left, it takes the last <li> and removes it, puts it on the front, and vice versa if you scroll right.
Here's the Code Pen: http://codepen.io/anon/pen/kGBcr
The slider is on the right side, under "More Influencers." The problem is when I click on the 'follow' link, it changes the CSS and text like I want only until it gets to a <li> that has been removed and placed on the other end. It doesn't prevent the default link, and just reloads the page.
Thanks for any help!
The functions that rotate the slider are on lines 120 and 135. The function that changes the text and CSS background color is on line 78.

Whenever you remove an element with remove(), it loses its bindings, and you need to re-bind event listeners.
However, if you use appendTo() instead to move it, the event listeners will stick around.
Another alternative is using the detach() function:
var objectWithEvents = $('#old').detach();
$('#new').append(objectWithEvents);
Your situation is even worse than just removing, since you're using:
html = $('element').html();
newHtml = someEl.append('<li>'+html+'</li>');
Around line 127. This makes it even worse because not only you're deleting the element, but taking its html content making it even more difficult to keep event listeners associated with it.

jquery: dynamically appending li items to ul then adding click, but click runs through each li

So I may be approaching this wrong as I am learning but I can't seem to figure out what I am doing wrong here (probably simple mistake but I am having trouble). So I am trying to have a within the markup, a button click that allows selection from dialog and the submit button on the dialog includes call to custom function that does some logic then appends string to the like:
buildListElementItem += "<li>something</li>";
$("#my-list").append(buildListElementItem);
then bind click because i need each of these list items to be representative of a selection panel type thing
$("#my-list li").bind('click', function () {
//processing stuff
});
everything works fine but if I add more than one item to this list (one after another) and you click a single item, it rolls through each one, which confused me because there is no each and I think this should only add it to a single item....
so there is a bunch more to this function/etc but I think my approach right here is wrong??
I have tried modifying the selector to like a class that I add in the string for the li, I have tried using .on, .live, .delegate or anything I could find instead of bind click.
Perhaps this is simple approach type error to trying to perform this but I would great appreciate any help, advice, etc on this.
EDIT: just adding more for clarification
Dialog allows users to select item from select/drop down, and button click (jquery ui) has function that calls below idea to add the item to a list element, which serves as selection panel. So they can populate items needed on panel, then click each item to populate and associate data with that item.
function addNewListItem(passedType)
{
var buildListElementItem = "<li>" + passedType + "</li>";
$("#my-list").append(buildListElementItem);
$("#my-list li").bind('click', function () {
otherStuff();
});
if I do the above I am guessing that this cause every element to get binded over and over again? not sure, but this works with the exception that when I click a single li item on that panel, it processes for all li items on the panel (otherStuff function). So I think from the examples I am starting to understand the issue or why this won't work, but how would I approach what I am trying to do then? always appreciated guys!
}

When you say "there is no each", you omit that $("#my-list li") is a jQuery selector, i.e. it returns all the elements that match the expression: in this case, all the li items within the child tree of #my-list.
Thus, when you call bind, it is going to bind to each li item that has already been added to the element.
What you are looking for is something along this:
buildListElementItem = $("<li>something</li>"); //constructs a jquery object you can bind to
buildListElementItem.bind('click', function () {
//processing stuff
});
$("my-list").append(buildListElementItem);
This way, you bind before the element has been added.

Javascript sibling onclick

This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.

I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.

Cloning li elements in JQuery

I'm using EasySlider, but unlike any of the examples of this plugin that I've found, I show multiple elements at any one time and the width is 100%. The separate images make up a full, long consecutive image, which is Photoshopped so even the borderline between first and last looks natural. It's configured to be a continuous slide automatically.
In the plugin there is this code:
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
My issue is that only the first element is cloned after the last one, so upon the second rotation of this slider, only the first element is shown, until it gets to the far left, then the other images appear to "pop" in. (similar: [EXAMPLE] if you imagine and all images to the right of the fairground not appearing until the fairground gets to the far left).
Is there any better way to manage this cloning of elements so that ALL the images are cloned? or perhaps someone can think of a better way? I'm new to JQuery
NOTE: I'm trying to create an operation whereby as an element leaves the screen on the left, it is placed back onto the right. Is there a way to ultimately achieve this?

I think you may want to consider a different plugin.
If you change the plugin, updating will require reapplying your patches.
I'd recommend
http://www.gmarwaha.com/jquery/jcarousellite/
or
http://sorgalla.com/jcarousel/
These both support what you are talking about.

I agree with troynt, in this case it would be better to use something that meets your requirements.
I just made a simple "plugin" what only does, what you need, maybe it's useful to you.
http://jsfiddle.net/doktormolle/4c5tt/
You can setup delay and duration and choose to pause on hover.

Given you have a list of items in your scroller like this:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
And assuming that every time you advance the scroller, the first-most li moves off screen, you can continuously pluck the first li off the front of the list and append it back to the end on each click of a "next" button or scroll event. If you're using jQuery >= 1.4, you can do this by using the detach() method, which will remove the element from the DOM but keep all its associated data so you can easily reattach it later:
$('ul li:first').detach().appendTo('ul');

Dont know, if I unterstand it the right way, you may try this:
//at first run add a class "init" to the inital li-elements,
//so that later only them will be cloned
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');
//prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));