Question

我有一个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 ));

}

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

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（）注册委托处理程序时，最好使用最接近的静态父级而不是文档/正文。感谢Regent建议：）

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

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

2 个答案: