CODEWITHSUNDEEP
jqueryhtml-table
user2736203
user2736203

Reputation: 195

Entire table row clickable except when clicking element within a td with a .class

I've made entire rows in my table clickable. Within some of the columns there is show/hide functionality when you click a link for some data e.g. 

<td>
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
...etc. etc...
    <li class="show-hide"><a href="#" class="show-hide">Show more</a></li>
    </ul>
</td>

Which basically just expands a ul from showing 3 li's to 10...

But because the entire table row is clickable, when I click 'Show more', it goes to the link of the row... and ignores the function of the show/hide.

So what I'd like to achieve is that when a user clicks the link with the class="show-hide" > then ignore the jQuery that sends the user to the link of the entire row...

jQuery to make row clickable

$(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

Upvotes: 3

Views: 3397

Answers (3)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Catch the event and read its properties. By this way you can identify what is you clicking right now.

$(document).ready(function($) {
    $(".clickable-row").click(function(event) {
        if(!$(event.target).hasClass('show-hide')) {
           window.document.location = $(this).data("href");
        }
    });
});

See it working:

https://jsfiddle.net/19ywsnh9/

Upvotes: 4

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14669

Use event.stopPropagation(), it will restrict parent event to call. please refer link : When use event.stopPropogation

    $(".show-hide").click(function (event) {            
        event.stopPropagation();
        // your logic here
    });

Upvotes: 2

Justinas
Justinas

Reputation: 43479

Bind event to li except with class .show-hide:

$('.clickable-row li:not(.show-hide)').click(function () {
    window.document.location = $(this).closest('.clickable-row').data("href");
});

Upvotes: 0

Related Questions