在Jquery中正确使用.on方法 [英] Proper use of .on method in Jquery

问题描述

我非常喜欢.live方法，因为它很简单，与标准事件处理程序基本上没有太大的不同。

唉，它已经被弃用了，我离开了使用.on方法。

基本上，我正在加载和动态加载内容，我需要触发相同的事件处理程序。而不是添加事件处理程序两次或多次。 .live是伟大的，但.on已经取代了它，我似乎无法让它工作。

检查这段代码：

  jQuery（'＃who_me'）。live（'click'，function（）{
 alert（'test123'）; 
 return false; 
}）; 
  

应与以下相同：

  jQuery（'＃who_me'）。on（'click'，function（）{
 alert（'test123'）; 
 return false; 
} ）; 
  

但是，在ajax调用之后，只需使用live方法就可以用.html方法替换内容。 / p>

有人可以为我清除这个问题吗？

解决方案

t使用 .on（）正确。如果 #who_me 对象来了，这是一个更好的实现。

  jQuery（document.body）.on（'click'，'#who_me'，function（）{
 alert（'test123'）; 
 return false; 
}）; 
  

您在jQuery对象中使用的选择器 .on（）必须是在安装事件处理程序时出现的对象，并且永远不会被删除或重新创建，并且是要安装事件的对象或该对象的父对象。选择器作为第二个参数传递到 .on（）是一个可选的选择器，与您想要事件的对象相匹配。如果你想要 .live（）类型的行为，那么你必须在jQuery对象中传递一个静态的父对象，并且选择一个与你想要事件的实际对象匹配的选择符第二个参数。

理想情况下，将父对象放在比较靠近动态对象的jQuery对象中。我已经显示 document.body 只是因为我知道这将工作，不知道其余的HTML，但你宁愿把它更接近你的实际对象。如果您在文档对象或 document.body 上放置了太多动态事件处理程序，则事件处理可能会减慢特别是如果您有复杂的选择器或处理程序，例如点击或mousemove等频繁的事件。

为了参考，100％等同于您的 .live （）代码是这样的：

  jQuery（document）.on（'click'，' who_me'，function（）{
 alert（'test123'）; 
 return false; 
}）; 
  

.live（）只需安装所有事件处理程序，并使用事件冒泡来查看页面上其他对象发生的所有事件。 jQuery已经不推荐使用 .live（），因为最好不要在文档对象上安装所有的Live事件处理程序（出于性能原因）。所以，选择一个更接近你的对象的静态父对象。

I really liked the .live method as it was straightforward and essentially not much different than your standard event handler.

Alas, it was deprecated and I'm left with the .on method.

Basically, I'm loading and dynamically loading content that I'll need the same event handler triggered on. Rather than add the event handler twice or however many times. .live was great for this, but .on has replaced it and I just can't seem to get it to work.

check this code:

jQuery('#who_me').live('click', function(){
        alert('test123');
        return false;
    });

should be the same as:

jQuery('#who_me').on('click', function(){
        alert('test123');
        return false;
    });

but when I replace content with the .html method after an ajax call only the live method works.

Can anyone clear this up for me?

解决方案

You aren't using .on() correctly. This is a better implementation if the #who_me object comes and goes.

jQuery(document.body).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

The selector you use in the jQuery object for .on() must be an object that is present at the time you install the event handler and never gets removed or recreated and is either the object you want the event installed on or a parent of that object. The selector passed as the 2nd argument to .on() is an optional selector that matches the object you want the event on. If you want .live() type behavior, then you must pass a static parent object in the jQuery object and a selector that matches the actual object you want the event on in the 2nd argument.

Ideally, you put a parent object in the jQuery object that is relatively close to the dynamic object. I've shown document.body just because I know that would work and don't know the rest of your HTML, but you'd rather put it closer to your actual object. If you put too many dynamic event handlers on the document object or on document.body, then event handling can really slow down, particularly if you have complicated selectors or handlers for frequent events like click or mousemove.

For reference, the 100% equivalent to your .live() code is this:

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

.live() just installs all its event handlers on the document object, and uses event bubbling to see all the events that happen on other objects in the page. jQuery has deprecated .live() because it's better to NOT install all your live event handlers on the document object (for performance reasons). So, pick a static parent object that is closer to your object.

这篇关于在Jquery中正确使用.on方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！