點擊事件未觸發預期效果

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括號，這樣看起來就像$("input").click(function(){})

-希望這可以幫助！

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是否被附加到ul ？