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

无需为每个元素添加事件。使用事件委托。

$(document).ready(function() {
    $(commonParentSelector).on('click', 'li', function() {
    // ^^^^^^^^^^^^^^^^^^^^
        $(this).remove();
    });
});

根据您的需要更新commonParentSelector，它应该有效。

文档：https://api.jquery.com/on

Answer 2

使用var $li = $("<li>").text($(this).text()).appendTo($container.find('ul'));

Click上没有任何事情发生 - jQuery

2 个答案: