live() 替代 on() 不工作 jQuery 1.9
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16457151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
live() alternative on() not working jQuery 1.9
提问by Déjà Bond
I have code do ajax method for loading new content
But I have problem with the new content, the links not applying the action i did like
preventDefault and the ajax method, just after loading the new content
clicking on links make the page reload like there was no ajax code at all
In JQ 1.8 working grate with live() method, but after updating jQuery, not working as it should with on() method
我有用于加载新内容的代码做 ajax 方法
但是我对新内容有问题，链接没有应用我所做的操作，例如
preventDefault 和 ajax 方法，在加载新内容后
点击链接使页面重新加载根本没有 ajax 代码
在 JQ 1.8 中使用 live() 方法工作，但是在更新 jQuery 后，使用 on() 方法无法正常工作
The old code working right and have no problem with it
旧代码工作正常，没有问题
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
function loadContent(url){
$.ajax({
url: url,
dataType: 'html',
cache: false
}).done(function(html){
var $html = $(html);
$('title').html($html.filter('title').text());
$('#main').replaceWith($html.find('#main'));
$('.nav-menu').replaceWith($html.find('.nav-menu'));
$('.nav-below').replaceWith($html.find('.nav-below'));
});
}
$(function(){
// Get The Content Action
$('.nav-menu li a,#nav-below a,#main a').live('click',function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
// go top after showing the content
$('html, body').animate({scrollTop:0}, 'slow');
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event){
loadContent(location.pathname);
$('html, body').animate({scrollTop:0}, 'slow');
};
});
</script>
The new updated code
新的更新代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function loadContent(url){
$.ajax({
url: url,
dataType: 'html',
cache: false
}).done(function(html){
var $html = $(html);
$('title').html($html.filter('title').text());
$('#main').replaceWith($html.find('#main'));
$('.nav-menu').replaceWith($html.find('.nav-menu'));
$('.nav-below').replaceWith($html.find('.nav-below'));
});
}
$(function(){
// Get The Content Action, ??=?=?=?=L0000K HERE=?=?=?=?? Not workin JQ 1.9
$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
// go top after showing the content
$('html, body').animate({scrollTop:0}, 'slow');
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event){
loadContent(location.pathname);
$('html, body').animate({scrollTop:0}, 'slow');
};
});
</script>
The problem right here
问题就在这里
$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
Thank you :)
谢谢 ：）
回答by alex
You don't simply s/live/on, you need to read the documentation of on()to see the changes required to update your code (onis similar to the old delegate()).
您不是简单的s/live/on，您需要阅读 的文档on()以查看更新代码所需的更改（on类似于旧的delegate()）。
If you want to make it work exactlylike live(), try...
如果你想它的工作究竟喜欢live()，尝试...
$(document).on('click', '.nav-menu li a,#nav-below a,#main a', function(e) { });
However, if you can, you're better off choosing the most common persistent ancestor. This means that the events won't have to go all the way up to documentto be handled. For example, bodyprobably covers 99.9% of situations. However, it's probably more like #some-container.
但是，如果可以，最好选择最常见的持久祖先。这意味着事件不必一直进行document到处理。例如，body可能涵盖 99.9% 的情况。然而，它可能更像是#some-container.
回答by Güven Altunta?
for easy usage you can use something like this:
为了方便使用，您可以使用以下内容：
$.fn.follow = function (event, callback) {
$(document).on(event, $(this).selector, callback);
}
and you can use it like:
你可以像这样使用它：
$("#myselector").follow("click",function(){
/*some callback code*/
});
you can still use event data in your plugin
您仍然可以在插件中使用事件数据
$("#expform").follow("submit",function(e){
e.preventDefault();
});
