jQuery'on'没有绑定事件到元素

Question

我有以下函数，它立即被调用并将click事件绑定到元素。

(function (window, $, undefined) {
    var methods     = {},
    selector = $('.selector');

    methods.init = function () { 
        selector.find('> .section').on('click', function (e) {
          alert('hey');
        }
    }

    if (selector.length > 0) {
        methods.init();
    }

}(window, jQuery));

我还需要它来绑定动态添加的元素，所以我改为：

var modules = modules || {};
modules.stuff = (function (window, $, undefined) {
    var methods     = {},
    selector = $('.selector');

    methods.init = function () {
        selector.find('> .section').on('click', function (e) {
          alert('hey');
        }
    }

    if (selector.length > 0) {
        methods.init();
    }


    return methods;

}(window, jQuery));

然后添加动态元素，然后调用modules.stuff.init();我可以看到init函数已经运行但是点击事件不会触发？

Answer 1

您需要使用on()方法的委托签名。试试这个：

methods.init = function () {
    selector.on('click', '> .section', function (e) {
        alert('hey');
    }
}