jQuery事件绑定on()与弹窗的例子

页面上经常会有弹窗，有的弹窗是动态生成的，有的弹窗是在页面底部隐藏的，对于动态生成的弹窗，如果要监听弹窗的事件，可以使用jQuery的事件绑定on()方法实现。

如图，弹窗是js动态生成的，通过点击某个链接弹出，弹窗中的“立即去使用”链接点击后，实现的效果是关闭弹窗，并跳转到锚点。

这个a标签是：

XHTML

ps/#gamelist" class="co_vip tdu ">立即去使用

我们要监听弹窗里面的click事件，但这个弹窗本身是动态生成的，因此我们要监听body，通过on()事件绑定，当动态生成这个弹窗时，可以监听到click方法：

function jump_to_anchor() {
   $("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) {
       link = $(this).attr('href');
       if (link == '/51dps/#gamelist') {
           e.preventDefault();
           msgExit();
           window.location.href = link;
       }
   });
}

这里实际上是绑定了两个a标签的事件绑定，都是当这个链接是某个url，阻止默认行为，并调用关闭弹窗方法，跳转到该链接，也就是锚点。

例子

比如页面上有下边两个元素：

使用下边的jQuery代码大家可以对比看看区别：

$(function () {
    var a = 1,
    $_div = $('#test');
    $('input[name=addbtn]').on('click', function () {
        $_div.append('');
        a++;
    });

    //偶数项点击事件
    $_div.on('click', 'input[name^=test]:even', function () {  
        alert('我是有效的on方法,你能看见我吗：' + this.value);
    });

    //奇数项绑定的点击事件  发现点击无效，而是用live方法却能够支持
    $('input[name^=test]:odd').on('click', function () {  
        alert('我是无效的on方法,你不能看见我');
    });

    //奇数项绑定的点击事件  发现点击无效，而是用live方法却能够支持
    $('input[name^=test]:odd').live('click', function () {
        alert('我是live方法,你能看见我吗：' + this.value);
    });
});

代码简单，就不放演示页了，如果有什么不明白的，可以留言