javascript - 如何从 jQuery 插件中附加 keyup 事件

Question

我有一个 jQuery 插件，里面有一个初始化函数。在这个初始化函数中，我附加了一些事件:

(function ( $ ) {

    $.fn.gallery = function(options) {

        var init = function(self) {

            var main += '<input id="gallery-search">';

            //click event for the filter checkboxes
            $("body").on('click', self.selector+" .gallery-filter-checkbox",function(event) {
                self.data(filter( self ));
            });

            //capture input in the search box
            $('#gallery-search').keyup(function(){
                console.log('test');
            });

            self.html(output);

        }

    }( jQuery ));

}

第一个工作得很好，但第二个根本不工作。我已经在插件范围之外对其进行了测试，它工作正常，因此没有语法错误，但可能是我尝试附加事件的方式有误？

Answer 1

由于 #gallery-search 是动态创建的，您可以使用 delegated event handler :

$(document).on('keyup', '#gallery-search', function() { ... });

如果 self 表示页面中的静态 HTML 元素，您可以使用更好的(为了性能)版本:

self.on('keyup', '#gallery-search', function() { ... });

或者如果以后不修改 HTML，您可以在元素插入后在代码中放置事件处理程序:

self.html(output);
$('#gallery-search').keyup(function()
{
    console.log('test');
});