事件没有在jQuery插件中触发

Question

我有一个带有下拉建议框的文本字段。我为textfield创建了一个插件来显示搜索建议。但是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

原因

this.val不是您的keyup处理程序中的函数。 this将引用html元素，而不是jQuery对象。您的处理程序正在被触发，但它在开始时就抛出错误。

解决方案

确保在处理程序中使用适当的jQuery对象。例如，将this.val更改为$(this).val。我创建了a jsFiddle来演示一些必需的修复程序。它不会完全奏效，因为您提供的代码不完整，但它应该显示一些所需的更正。

注释

• this，在jQuery插件的范围内，是一个jQuery对象。
• this，在事件处理程序的范围内，是一个HTML元素对象。
• 要获取给定HTML元素对象的jQuery对象，请执行$(myHtmlElem)，其中myHtmlElem是HTML元素对象。

Answer 2

alert(this.val())是一个错误（this是事件处理程序中的DOM元素），它会破坏事件处理程序的执行。