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

Question

这是小提琴： http : //jsfiddle.net/mlynn/3rp5gcdu/2/

当您开始在文本框中输入内容时，带有加号的图片会滑入文本框。 当前已对其进行了编码，因此当您单击加号时，将清除输入文本，并且加号会滑出视图。

我希望这样，除了清除文本并使图像滑出视图之外，单击加号还将输入文本添加到下面的列表中。 如果您单击“ Enter”，则添加到列表的效果很好，但是我也希望它在单击该加号时也执行相同的功能，以便用户可以选择按Enter或单击加号以添加到列表中。

希望这是有道理的。

这是我的JS代码：

// 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

您必须添加类似以下内容：

 $('form').submit();

上

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

}

这是小提琴： http : //jsfiddle.net/3rp5gcdu/7/

Answer 2

检查这个小提琴： http : //jsfiddle.net/3rp5gcdu/6/

我使用on()方法，可以在其中指定动态创建的DOM元素的行为。 每次将鼠标悬停在图标上时，您都可以看到它向input元素添加了onX类。

$(document).on('click', 'input.onX', function(){ // do something } <在这里，我的意思是“每次单击具有onX类的输入文本时， onX做某事”

为了使其更优雅，您可以：

• 创建一个功能addItem ;
• 将form submit的代码和$(document).on('click', 'input.onX', function()的代码复制/粘贴到其addItem函数中，并两次调用。