On('click')在使用load()函数加载页面后,jquery不起作用

Question

使用cookie来知道在我的DIV中加载哪个页面

if($.cookie('logged') == null){
    $('#auction-form').load('pages/login.php');
}else{
    $('#auction-form').load('pages/bid.php');
}

但是在login.php页面中,我有另一个链接会触发另一个无效的load()函数.

$('.register-btn').on('click',function(){
    $('#auction-form').load('pages/register.php');
});

.register-btn类是一个应该触发上述函数的链接.我知道这可能是因为当加载login.php页面时,它不在DOM中,因此无法看到.register-btn.如何在从load()函数加载的页面上委派脚本？

Answer 1

使用.on()使用事件委派

$(document).on('click','.register-btn',function(){

代替

$('.register-btn').on('click',function(){

由于.register-btn不驻留在DOM(动态元素)上,因此无法直接绑定事件.

对于动态元素,语法为:

$(parentselector).on('event', 'selector', yourFunction)

注意,parentselector需要是一个Non-dynamic always DOM present element