Question

我使用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/

我错过了什么？

Answer 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>

Answer 2

除了实际问题之外，我注意到当用户将鼠标悬停在真实链接上时，您正在删除td点击事件。您可以这样做的唯一原因是点击气泡直到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;
}

javascript可点击行

2 个答案: