将此jQuery的“ onClick”操作从清除输入文本更改为将输入文本添加到下面的列表中？

Question

Here is the fiddle: http://jsfiddle.net/mlynn/3rp5gcdu/2/

When you start typing in the text box, a picture of a plus sign slides into the textbox. It is currently coded so that when you click the plus sign, the input text is cleared and the plus sign slides back out of view.

I would like it so that, in addition to clearing the text and sliding the image out of view, clicking on the plus sign also adds the input text to the list below. Adding to the list works perfectly fine if you hit "Enter", but I want it to perform the same function upon clicking on that plus sign too, so that the user has a choice of either hitting enter or clicking the plus sign in order to add to the list.

Hope this makes sense.

Here is my JS code:

// sub menus identification
$(function() {
  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});









//newList

$(document).ready(function() {  

    var ul = $('.lister ul'),
        input = $('input'),
        CategoryIcon;


    input.focus();  



    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();


            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().slideUp();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });

});







//clearable

jQuery(function($) {


  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('').change();
  });


});

Answer 1

You must add something like:

 $('form').submit();

on

on('click', '.onX', function(){

}

Here is the fiddle: http://jsfiddle.net/3rp5gcdu/7/

Answer 2

Check this fiddle out: http://jsfiddle.net/3rp5gcdu/6/

I'm making use of on() method, where I can specify behavior of dynamically created DOM elements. Everytime you mousehover the icon, you can see it adds a onX class to the input element.

$(document).on('click', 'input.onX', function(){ // do something } < here, I'm saying that "everytime you click on the input text that has the class onX , do something"

To make it more elegant, you can:

• create a function addItem ;
• copy / paste the code inside form submit and the code inside $(document).on('click', 'input.onX', function() into it addItem function and call it both times.