jquery $(document).ready 事件不起作用
我有一个table，其中所有行除了表头都设为data class。
然后我在$(document).ready()事件中设定这些行的事件：

        $(document).ready(function ()
        {
            $(".data").mouseenter(function ()
            {
                $(this).children().css("background-color", "#f1f1f1");
            });

            $(".data").mouseleave(function ()
            {
                $(this).children().css("background-color", "#ffffff");
            });
        });

结果事件不起作用，而当我在$(".data").mouseenter行之前加一个alert()，事件就起作用了。
看起来是document ready触发的时候有什么东西还没载入完成。请问有什么办法解决这个问题？总不能让用户每次都先点一下alert吧！

下面是我的事件作用于的table：

        <table class="details ui-widget-content fullWidth">
            <thead>
                <tr>
                    <th>Machine Name</th>
                    <th>IP Address</th>
                    <th>State</th>
                    <th>Provision Type</th>
                    <th>Running</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: machines">
                <tr class="data">                    <td><span data-bind="text: ComputerName"></span></td>
                    <td><span data-bind="text: IPAddress"></span></td>
                    <td><span data-bind="text: State"></span></td>
                    <td><span data-bind="text: ProvisionType"></span&