Question

我尝试使用.on（）jQuery函数在我拥有的<li>时调用某些东西。

当我尝试做这样的事情时：

$("body").on({
            mouseenter: function () {
                console.warn('dansl\'body');
                //stuff to do on mouse enter
            },
            mouseleave: function () {
                console.warn('sorti');
                //stuff to do on mouse leave
            }
});

它有效，我在身体徘徊时收到信息。但是当我试图用“li”代替“body”时，它已经不再适用了。如何在一组<li>？

上应用.on（）

PS：我的<li>是在文档加载后生成的。

Answer 1

您需要事件委派才能将事件附加到动态添加的dom：

<强>更新 .hover()不能与.on()一起使用$("body").on({ mouseenter: function () { console.warn('dansl\'body'); //stuff to do on mouse enter }, mouseleave: function () { console.warn('sorti'); //stuff to do on mouse leave } }, "li"); //pass the element as an argument to .on。您可以改为使用：

{{1}}

Answer 2

试试这个：

$(document).on("mouseenter", "li", function() {
    // cause some mayhem here
}).on("mouseleave", "li", function() {
    // use this to restore order
});

事件在元素存在之前被绑定，因此它们不会接收事件。当你将它绑定在这样的文档上时，它将出现在与选择器匹配的所有元素上，甚至是动态创建的元素。

Answer 3

总结这里提供的所有解决方案，因为您的目标元素是动态加载的，所以最好在元素创建后使用event delegation而不是绑定事件。

对于单个事件，on方法的第二个参数用作目标元素的选择器：

$('ul').on('click', 'li', function() {
    // "dynamic" <li> element is clicked
});

对于多个事件，可以使用以下方法：

$('ul').on({
    mouseenter: function() {
        // <li> receives 'mouseenter'
    },
    mouseleave: function() {
        // <li> receives 'mouseleave'
    }
}, 'li');

为了使代码运行得更快，您应该将事件绑定到目标元素的最近的静态父代。

DEMO： http://jsfiddle.net/qb95X/

.on（）在一组<li>元素</li>上

3 个答案: