Question

Most of the code works as expected, but I’m getting some unusual behavior under a very specific circumstance that I’m totally confused about…

I’m moving elements from div to div depending on the class of the one that is picked. I’ve got all of that working…

I’m now trying to implement an input field that will take a value, create an <li> element out of it, and append it to another div. I’ve got that working as well.

The problem that I’m having is I keep getting an extra blank li added if I click out of the input field and then back in it and add something… I can see (in the jsfiddle link) that it’s inserting 2 commas, and that’s likely why I’m getting an additional blank li, but I can’t pinpoint where that’s happening…

I’m trying to achieve the following:

1. A user enters text into the input
   field and hits enter. <– works
2. An
   <li> element is created (with a
   class of “oon”) and appended to
   ul#selected. <– works
3. If a user
   clicks on <li class="oon">, it is
   removed <– works

The Problem

1. I click in an input field and
   enter some text and hit enter. If I
   stay in the input field and keep
   typing values and hitting enter, it
   always works as expected.
2. I click on another element with the
   class “addable”. That gets appended
   as expected.
3. I return to the
   input field and enter some text and
   hit enter. Now, what I typed in is
   appended just as it is in Problem
   (1), but it also adds on an
   additional li element with an empty
   id and no text

Per someone’s comment, I posted the code here:
http://jsfiddle.net/vvF7v/11/

Answer 1

You’re re-binding the keypress event every time a user clicks an ‘li’. So each time you go through your steps 1-3, it keeps adding to the number of blank ‘li’s being appended.

Try this:

 $('input#add-oon').unbind('keypress').keypress(function(e) {