0

我在使用 javascript 这个可点击的行时遇到了一些问题：

http://www.fpmnky.com/test.php

光标不会变为指针，如果您单击该行的文本区域，它不会转到代码中的链接 [google.com]

    <script type="text/javascript" src="other_lib.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">

        jQuery( function($) {
            $('tbody tr[data-href]').addClass('clickable').click( function() {
                window.location = $(this).attr('data-href');
            }).find('a').hover( function() {
                        $(this).parents('tr').unbind('click');
                    }, function() {
                        $(this).parents('tr').click( function() {
                            window.location = $(this).attr('data-href');
                        });
                    });
            $('tbody tr[data-href]').css( 'cursor', 'pointer' );

            $('tbody tr[data-href]').hover(function() {
                $(this).css('cursor','pointer');
            });
        });

    </script>

<body>

<table>
    <thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    <tr class="even" data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    <tr data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    <tr class="even" data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    </tbody>
</table>

</body>
</html>

它似乎在 jsfiddle 上工作得很好：

http://jsfiddle.net/UN7Pc/5/

我错过了什么？

4

2 回答 2

1

http：你的问题在这里

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

位置错误，如果您修复它，您的代码将起作用

顺便说一句，如果你愿意，你可以通过谷歌链接到 jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
于 2012-12-30T22:37:07.100 回答
0

除了实际问题之外，我注意到当用户将鼠标悬停在真实链接上时，您正在删除 td click 事件。您可以这样做的唯一原因是点击会冒泡到 tr。

因此，相反，绑定 td （tr 通常是不可点击的，它是 td 点击冒泡到它，你正在捕捉），如果它不是被点击的 td，则返回。

你的代码

$('tbody tr[data-href]').addClass('clickable').click( function() {
    window.location = $(this).attr('data-href');
}).find('a').hover( function() {
    $(this).parents('tr').unbind('click');
}, function() {
    $(this).parents('tr').click( function() {
        window.location = $(this).attr('data-href');
    });
});

更少的代码

$('tbody tr[data-href] td').addClass('clickable').on('click', function(e) {
    if (e.target!=this) return; 
    window.location = $(this).parent().data('href');
});

此外，除了在您的 JS 中添加 CSS，cursor:pointer只能在悬停时存在（因为指针在任何其他时间都不在元素上）

.clickable {
    cursor:pointer;
}
于 2012-12-30T23:05:52.953 回答