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

我认为您需要在$input.click附近使用括号，所以它看起来像$("input").click(function(){})

- 希望这有帮助！

Answer 2

def AddNewPrice
  @newPrice = ProductPrice.find_or_create_by(product_id: params[:product_id], retailer_id: params[:retailer_id])
  @newPrice.my_attribute = 'updated value'
  @newPrice.save
end

应该是

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

Answer 3

这是它应该如何运作的：

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

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

Answer 4

我相信你在这里有更多的东西。我测试了类似的东西，似乎工作正常。 li是否附加到ul？

单击事件不会触发所需的效果

4 个答案: