Jquery javascript可点击行_Jquery

Jquery javascript可点击行

jquery

Jquery javascript可点击行,jquery,Jquery,我在使用javascript处理此可单击行时遇到一些问题：光标不会变为指针，如果单击行的文本区域，它不会转到代码[google.com]中的链接 <script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <scrip

我在使用javascript处理此可单击行时遇到一些问题：

光标不会变为指针，如果单击行的文本区域，它不会转到代码[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>


jQuery（函数（$）{
$（'tbody tr[data href]'）。addClass（'clickable'）。单击（function（）{
window.location=$（this.attr（'data-href'）；
}).find（'a'）.hover（函数（）{
$（this.parents（'tr'）。解除绑定（'click'）；
}，函数（）{
$（this.parents（'tr'）。单击（function（）{
window.location=$（this.attr（'data-href'）；
});
});
$（'tbody tr[data href]'）.css（'cursor'，'pointer'）；
$（'tbody tr[data href]'）。悬停（函数（）{
$（this.css（'cursor'，'pointer'）；
});
});
第1列
第2列
第3列
第4列
行动
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本

不过，它在JSFIDLE上似乎工作得很好：

我遗漏了什么？

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>

除了实际问题之外，我注意到当用户悬停在真实链接上时，您正在删除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

只能存在于hover上（因为指针在任何其他时间都不在元素上）

cursor:pointer

实际上只对hover有效-您可以在CSS中设置它。

.find（'a'）.hover（function（）{$（this）.parents（'tr'）.unbind（'click'））有一个比这更好的方法…当你试图从这里获取该文件时，位置应该是什么？但是正如你所看到的，它不存在，也许你忘记上传了！！这就是它…我还在学习，所以谢谢你的初步建议
.clickable {
    cursor:pointer;
}