Нажмите событие не вызывает желаемый эффект

Question

У меня есть этот код:

jQuery.fn.extend({ 
    SelectBox: function(options) { 
     return this.each(function() { 
      new jQuery.SelectBox(this, options); 
     }); 
    } 
}); 

jQuery.SelectBox = function(selectobj, options) { 

    var opt = options || {}; 
    opt.inputClass = opt.inputClass || "inputClass"; 
    opt.containerClass = opt.containerClass || "containerClass"; 

    var inFocus = false; 

    var $select = $(selectobj); 
    var $container = setupContainer(opt); 
    var $input = setupInput(opt); 

    $select.hide(); 
    hideMe(); 

    $input 
    .click(function(){ 
     if (!inFocus) { 
      showMe(); 
     } else { 
      hideMe(); 
     } 
    }) 
    .keydown(function(event) {  
     switch(event.keyCode) { 
      case 27: 
       hideMe(); 
      break; 
     } 
    }) 
    .blur(function() { 
     if ($container.not(':visible')) { 
      hideMe(); 
     } 
    }); 

    function showMe() { 
     $container.show(); 
     inFocus = true; 
    } 

    function hideMe() { 
     $container.hide(); 
     inFocus = false; 
    } 

    function setupContainer(options){ 
     $container = $("." + options.containerClass); 
     $input = $("." + options.inputClass); 

     var first = false; 
     var li = ""; 

     $select.find('option').each(function(){ 
      if($(this).is(':selected')){ 
       $input.find('span').text($(this).text()); 
       first = true; 
      } 
      //var $li = $container.find('ul').append('<li>' + $(this).text() + '</li>'); 
      var li = document.createElement('li'); 
      li.innerHTML = $(this).text(); 
      $container.find('ul').append(li); 
      $(li).click(function(event){ 
       $(li).remove(); 
      }); 
     }); 

     return $container; 
    } 

    function setupInput(options){ 
     $input = $("." + options.inputClass); 
     $input.attr('tabindex', '0'); 
     return $input; 
    } 

}; 

В этом коде «выбрать» Я выбираю скрытый, и заменяется список. Теперь, я хочу щелкнуть на некоторых «li», а «li» удален.

Но, я нажимаю на «li», который я создал, и ничего не произошло. Зачем? как я могу удалить или сделать что-нибудь еще, когда я нажму «li»?

Answer 1

я думаю, что вам нужна скобка вокруг $input.click так что это будет выглядеть как этот $("input").click(function(){})

-hope это помогает!

Answer 2

$(li).click(function(event){ 
    $(li).remove(); 
}); 

должен быть

$(li).click(function(event){ 
    $(this).remove(); 
}); 

Answer 3

Вот как это должно работать:

... 
var $li = $('<li />') 
    .html($(this).text()) 
    .click(function(){ 
     $(this).remove(); 
    }); 

$container.find('ul').append($li); 
... 

Answer 4

Я полагаю, что есть еще что-то, что вы здесь. Я тестировал аналогичную вещь, и она работает нормально. Сделайте li s добавлением к ul?