將此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函數中，並兩次調用。