javascript clickable row

Question

Im having some trouble with this clickable row using javascript:

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

The curser doesnt change to a pointer and if you click the text area of the row it does not go to the link in the code [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>

It appears to work on jsfiddle just fine though:

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

What am I missing?

cursor: pointer actually only works on hover — you might as well just set it in CSS. — Waleed Khan
– Waleed Khan, Commented Dec 30, 2012 at 22:24
.find('a').hover( function() { $(this).parents('tr').unbind('click'); there is a better way than this... — Popnoodles
– Popnoodles, Commented Dec 30, 2012 at 22:58

aurel · Accepted Answer · 2012-12-30 22:52:20Z

1

http:Your problem is here

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

The location is wrong, if you fix that, your code will work

By the way you can link to jquery through google if you want

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

edited Dec 30, 2012 at 22:52

answered Dec 30, 2012 at 22:37

aurel

3,16011 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DJ Howarth Over a year ago

Whats the location suppose to be

aurel Over a year ago

at the moment you are trying to get that file from here fpmnky.com/js/jquery-1.8.2.min.js but as you can see, it does not exist, maybe you forgot to upload it!!

DJ Howarth Over a year ago

Thats what it was...Im still learning, so thank you for the elementary advise

Popnoodles · Accepted Answer · 2012-12-30 23:12:28Z

Aside from the actual problem I notice you're removing the td click event when the user hovers over a real link. The only reason you can be doing this is that the click bubbles up to the tr.

So, instead, bind the td (tr is usually unclickable, it's the td click bubbling up to it that you're catching) and return if it's not the td being clicked.

Your code

$('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');
    });
});

Less code

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

Also rather than adding CSS in your JS, cursor:pointer can only exist on hover (because the pointer isn't on the element at any other time)

.clickable {
    cursor:pointer;
}

Collectives™ on Stack Overflow

javascript clickable row

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related