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");

    } 

}); 

一切问题都解决了。