如何从 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');
});

Answer 2

keyup() 是 bind('keyup',callback) 的快捷方式，它将在 DOM 中已经存在的元素上注册一些事件处理程序（不一定呈现）。如果元素在定义时不在 DOM 中，它将不起作用。为此，您需要使用 delegate()，它将在当前可用或将来可能可用的元素上附加一些处理程序。

从jQuery 1.7开始，建议使用on()，因为它结合了bind / delegate / live的功能。

on()有两种使用方式

$(selector).on('event',callback);
$(parentSelector).on('event','someChildSelector', callback);

第一个是直接处理程序，第二个称为委托处理程序。如果您使用第一个注册事件处理程序，则必须确保该元素在注册时出现在 DOM 中，就像 bind() 一样。因此，如果您要添加新元素，则必须再次附加该处理程序。

如果您使用的是第二种方式，则不必担心再次注册处理程序

$(document).on('click','.row',callback);

由于文档始终可用，您的回调将注册为所有现有行和您将来可能添加的任何新行的点击处理程序。

我强烈建议您阅读 Direct and delegated events 部分 here。他们甚至解释了性能优势。

现在您知道它是如何工作的，您可以使用 on() 作为直接处理程序或委托处理程序来修复它。

编辑： 在使用 on() 注册委托处理程序时，最好使用最近的静态父级而不是 document/body。感谢摄政王的建议 :)

   $('closestStaticParent').on('keyup','#gallery-search',function(){
        console.log('test');
   });

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

how to attach keyup event from within jQuery plugin

javascript

jquery

events