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></td>
                    <td><span data-bind="text: HasRunningServer"></span></td>
                    <td><a onclick="toggleImages(event)">Show</a></td>
                </tr>
                <tr class="data images">                    <td colspan="6">
                        <table>
                            <tr>
                                <td>456</td>
                            </tr>
                        </table>                    </td>
                </tr>
            </tbody>
        </table>jquery event