点击事件不会触发预期效果

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;
    }

};

在这段代码中，"select“我选择隐藏，并替换为一个列表。现在，我想单击一些"li"，并删除"li“。

但是，我单击我创建的"li“，什么也没有发生。为什么？当我单击"li“时，如何删除或执行其他操作？

Answer 1

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

应该是

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

Answer 2

它应该是这样工作的：

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

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

Answer 3

我相信你在这里有更多的东西。我测试了一个类似的东西，它似乎工作得很好。是否将li追加到ul