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

how to attach keyup event from within jQuery plugin

本文关键字：keyup 事件 插件 jQuery      更新时间：2023-09-26

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

(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 ));
}

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

由于#gallery-search是动态创建的，因此可以使用委托的事件处理程序：

$(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');
});

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

从jQuery 1.7开始，建议使用on()，因为它结合了绑定/委托/实时的功能。

on（） 可以通过两种方式使用

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

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

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

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

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

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

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

编辑：使用 on（） 注册委托处理程序时，最好使用最接近的静态父级而不是文档/正文。感谢丽晶的建议:)

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