在Jquery中正确使用.on方法
我真的很喜欢.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调用之后用.html方法替换内容时，只有live方法有效。
任何人都可以为我清除这个吗？
您没有正确使用.on() 。 如果#who_me对象#who_me这是一个更好的实现。
jQuery(document.body).on('click', '#who_me', function(){ alert('test123'); return false; });
您在.on()的jQuery对象中使用的选择器必须是安装事件处理程序时出现的对象，并且永远不会被删除或重新创建，并且是您希望事件安装在其上的对象或者是父对象的父对象。宾语。 作为第二个参数传递给.on()的选择器是一个可选的选择器，它匹配您希望事件所在的对象。 如果你想要.live()类型的行为，那么你必须在jQuery对象中传递一个静态父对象，并在第二个参数中传递一个匹配你想要事件的实际对象的选择器。
理想情况下，将父对象放在与动态对象相对接近的jQuery对象中。 我已经展示了document.body只是因为我知道它可以工作并且不知道HTML的其余部分，但你宁愿把它放在你的实际对象附近。 如果在document对象或document.body上放置了太多动态事件处理程序，那么事件处理确实会变慢，特别是如果您有频繁事件（如click或mousemove）的复杂选择器或处理程序。
作为参考，100％相当于你的.live()代码是这样的：
jQuery(document).on('click', '#who_me', function(){ alert('test123'); return false; });
.live()只是在文档对象上安装其所有事件处理程序，并使用事件冒泡来查看页面中其他对象上发生的所有事件。 jQuery已弃用.live()因为最好不要在文档对象上安装所有实时事件处理程序（出于性能原因）。 因此，选择一个更接近您的对象的静态父对象。
使用.live时的上下文是document ，因此.on的选择器应该是document
$(document).on("click","#who_me",function(){...});
你正在使用的方式，它基本上是bind的替代品，而不是live 。 使用on ，与live和delegate ，您可以使用事件委派，但是您必须提供特定的包含元素（ delegate的情况总是如此）。
在最简单的层面上，这可以是document 。 在这种情况下，处理程序将完全像live一样运行：
jQuery(document).on('click', '#who_me', function() { alert('test123'); return false; });
但是，找到最接近的元素以包含将存在的元素会更好。 这样可以提高性能。
jQuery('#some_el').on('click', '#who_me', function() { alert('test123'); return false; });
jQuery(document).on('click', '#who_me', function(){ alert('test123'); return false; });
应该相当于jQuery.live('#who_me', function() { // code here });
不。
$( '#who_me' ).live( 'click', function () { ... });
是相同的：
$( document ).on( 'click', '#who_me', function () { ... });
但是，您通常不希望将多个处理程序绑定到document对象。 而是绑定到最近的静态祖先 （在这种情况下为#who_me ）。 所以：
$( '#wrapper' ).on( 'click', '#who_me', function () { ... });
其中#wrapper是#wrapper的祖先。
要替换.live（），你需要在.on（）调用中再增加一个参数。
// do not use! - .live(events, handler) $('#container a').live('click', function(event) { event.preventDefault(); console.log('item anchor clicked'); }); // new way (jQuery 1.7+) - .on(events, selector, handler) $('#container').on('click', 'a', function(event) { event.preventDefault(); console.log('item anchor clicked'); });
资料来源： http ： //www.andismith.com/blog/2011/11/on-and-off/