События не запускаются в плагине jQuery

Question

У меня есть текстовое поле с раскрывающимся списком предложений. Я создал плагин для текстового поля для отображения поисковых предложений. Но события keyup и blur не запускаются.

    (function($){
    $.fn.suggestions = function(input, suggestbox, options){
        alert("page loaded");
        alert(this.css("visibility"));
        this.keyup(function(event){
                alert(this.val());
                if(this.val() != ""){
                    $(suggestbox).css("visibility", "visible");
                    alert($(suggestbox).css("visibility"));
                    $(suggestbox).hide();
                    $(suggestbox).fadeIn("fast");
                    var query = this.val();
                    $(suggestbox).empty();
                    $(suggestbox).append("<ul>").css({
                                'list-style-type': 'none',
                                'cursor': 'pointer'
                            });
                    input(query, function(companies){
                        $.each(companies, function(index, value){
                            $(suggestbox).append("<li>" + value + "</li>").children("li").mouseover(function(event){
                                $(this).removeClass(options.mouseoutcss);
                                $(this).addClass(options.mouseincss);
                            }).mouseout(function(){
                                $(this).removeClass(options.mouseincss);
                                $(this).addClass(options.mouseoutcss);
                            }).click(function(){
                                        this.val($(this).text());
                                        $(suggestbox).hide();
                                    });
                        });
                    });
                    $(suggestbox).append("</ul>");
                }else{
                    $(suggestbox).fadeOut("fast", function(){
                        $(suggestbox).css("visibility", "hidden");
                    });
                }
            });

            this.blur(function(){
                setTimeout(function(){
                    if($(suggestbox).css("visibility") == "visible"){
                        $(suggestbox).hide();
                    }
                }, 200);
            });

    };

}) (jQuery);

Я тоже попробовал следующее, но тоже не повезло.

        this.each(function(){
    $(this).keyup(function(event){....});
});

Answer 1

alert(this.val()) - это ошибка (this - это элемент DOM внутри обработчика событий), который прерывает выполнение обработчика событий.

Answer 2

Причина

this.val не является функцией в вашем обработчике ключей. this будет ссылаться на элемент html, а не на объект jQuery. Ваш обработчик запускается, но выдает ошибку с самого начала.

Решение

Убедитесь, что вы используете объект jQuery, где это уместно, в ваших обработчиках. Например, измените this.val на $(this).val. Я создал jsFiddle , демонстрирующий некоторые необходимые исправления. Он не будет работать полностью, так как код, который вы дали, был неполным, но он должен показать вам некоторые необходимые исправления.

Примечания

• this, в рамках плагина jQuery, является объектом jQuery.
• this в области действия обработчика событий является объектом HTML-элемента.
• Чтобы получить объект jQuery для данного объекта элемента HTML, выполните $(myHtmlElem), где myHtmlElem - это объект элемента HTML.