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

実際の問題は別として、ユーザーが実際のリンクにカーソルを合わせたときにtdclickイベントを削除していることに気付きました。これを行うことができる唯一の理由は、クリックが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 に答える