jquery重载页面部分的点击事件无法运行

Question

绑定click事件到表格tabel里的链接<a class="del">xxx</a>,并发送ajax请求,成功后重载表格table部分,即执行$('#table').load(location.href + ' #table>*')。此时再点击链接,点击事件无法执行,必须重新刷新页面。如何修改？html代码如下：<table id="table">    <tr>        <th>分类名称</th>        <th>文章数量</th>        <th>分类排序</th>        <th>操作</th>    </tr><?php foreach ($catelist as $v) { ?>    <tr>        <td class="tdFirst"></td>        <td></td>        <td></td>        <td class="tdLast">            <a href="">编辑</a>            <a class="del" url="c.php?cid=<?php echo $v['cid'] ?>" href="javascript:;">移除</a>        </td>    </tr><?php } ?></table>jquery代码如下：$(function() {    $('.del').on('click', function() {        var url = $(this).attr('url');        $.ajax({            url: url,            type: 'GET',            success: function(res) {                $('#msg').fadeIn('slow').children().text(res);                $('#table').load(location.href + ' #table>*');                var timeId = function() {                    $('#msg').fadeOut('slow');                };                setTimeout(timeId, 2000);            },        })    })})

Answer 1

重载之后，之前绑定的事件就没了。用delegate将事件绑在父元素上，即$("#table").on('click','.del',handler)试试。

Answer 2

如果jquery版本比较低（1.2？）可以使用$("#table").live('click','.del',handler)方法，如果比较高（1.5？）的话可以使用上面提到的on方法