Jquery 页面元素事件绑定

场景：

用一个Table来展示数据信息列表，通过鼠标点击Table中的Tr来获取到当前选中的数据行信息。

　　　　<table class="Table" width="100%" cellpadding="0" cellspacing="0" >
            <thead>
                <tr>
                    <td>名称</td>
                    <td style="width: 100px;">题型</td>
                    <td style="width: 100px;">创建人</td>
                    <td style="width: 100px;">创建时间</td>
                    <td style="width: 100px;">最后修改人</td>
                    <td style="width: 100px;">最后修改时间</td>
                    <td style="width: 50px;">状态</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

 

情况1：数据信息是写死在页面上或者同步加载到页面。这时候需要绑定tr的点击事件，通常的做法是

$(function () {
    $('.Table tbody tr').click(function(){
        alert(1);
　　　　 /*其他需要处理的事件信息*/
    });
});

这种情况下是没有问题的。

 

情况2：数据信息是通过Ajax动态生成的。这时候如果还是采用上面的方法来绑定事件到动态生成的tr元素上，你会发现就算你把鼠标点烂了，那个alert提示框也不会出来。

原因：通过Ajax加载的数据信息是在 调用 .bind() 之后添加的，所以点击tr元素不会有任何效果。

有人说通过live可以解决这个问题，我们尝试一下看看效果

$(function () {
　　$('.Table tbody tr').live('click',function(){
　　　　alert(1);
 　　　　/*其他需要处理的事件信息*/
　　});
});

试一下果然行，但是这只是把事件绑定到了动态生成的元素上面，如果我们的点击事件里面需要获取动态生成的元素属性值等信息。如下

$(function () {
　　$('.Table tbody tr').live('click',function(){
　　　　if ($(this).attr("class").indexOf("selected") != (-1)) {
                $('.treeTable tr').removeClass("selected");
            } else {
                $('.treeTable tr').removeClass("selected");
                $(this).addClass("selected");
            }
　　　　}
　　});
});

我点我点我点点点，失效了吧！！！！

所以live方法能将事件绑定到动态生成的元素上，但是要获取动态生成元素的属性值时是不行的，至少我没成功。

这个时候我们需要 .delegate()来帮忙

$(document).delegate('.treeTable tbody tr', 'click', function () {
    if ($(this).attr("class").indexOf("selected") != (-1)) {
        $('.treeTable tr').removeClass("selected");
    } else {
        $('.treeTable tr').removeClass("selected");
        $(this).addClass("selected");
    } 
}); 

一切问题都解决了。