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

我有一个jQuery插件，里面有一个init函数。在这个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 ));

}

（函数（$）{
$.fn.gallery=功能（选项）{
var init=函数（自身）{
var main+=''；
//单击过滤器复选框的事件
$（“正文”）。在（'click'，self.selector+“.gallery filter checkbox”，函数（事件）{
自身数据（过滤器（自身））；
});
//在搜索框中捕获输入
$（“#图库搜索”）.keyup（函数（）{
console.log（'test'）；
});
html（输出）；
}
}（jQuery））；
}

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

由于

#gallery search

是动态创建的，因此您可以使用：

如果

self

表示页面上的静态HTML元素，您可以使用更好的（性能）版本：

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

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

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

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

我强烈建议您阅读

直接和委托事件

部分。他们甚至解释了性能优势

现在您已经了解了它的工作原理，可以使用

on（）

作为直接处理程序或委托处理程序来修复它

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

---

在添加事件处理程序时，页面上是否存在

#gallery search

元素。。。新手犯的错误。我之前编译了所有的html，但直到附件之后才真正呈现给DOM。我猜另一个事件实际上允许我这么做，因为它将侦听器附加到正文中的每个单击，然后检查单击是否针对目标元素。不客气。因此，您也可以切换到委托事件处理程序：

$（文档）。在（'keyup'，'#gallery search'，function（）{

。这会从浏览器中占用更多的系统资源，对吗？是的，会。这就是为什么通常使用最接近的静态父级而不是

文档

/

正文

，以最小化不必要的操作的原因。

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

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

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