CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraphyperlink
booky99
booky99

Reputation: 1456

JQuery Table row .on("click" find if a hyperlink was clicked or just row

I am developing a site with the following libraries:

I have created this JSfiddle with dummy data to explain what I am looking for: https://jsfiddle.net/xuf7wy4x/1/

As of right now, if I click ANYWHERE on the row, the onclick listener fires but does not discriminate hyperlinks. Whenever I click on the email hyperlink in my row, my dialog at the bottom opens and the default mailing program (e.g. outlook) opens at the same time which is annoying. What I want is to say "if onclick captures a hyperlink, don't open dialog. Otherwise if no hyperlink was touched in onclick, open dialog".

I don't know how to discriminate between a general click and one which is pointing at a hyperlink. Any help is really appreciated!

Just in case, the code is:

HTML

<div class="container">
                <div class="row">
                    </div>
                    <div class="col-xs-6 table-responsive peoplelist" id="peoplelist">
                    <h3>People within the bowl  <small><i>Hint:</i> click on the rows to edit or delete them</small></h3>
                        <table class="table table-striped table-hover bowlsetting">
                            <thead>
                                <tr>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Role</th>
                                    <th>Email</th>
                                    <th>School</th>
                                </tr>
                            </thead>
                            <tbody id="bowsettingsbody">
                                <tr class="bowsettingperson">
                            <td> firstName </td>
                            <td> lastName </td>
                            <td> role</td>
                            <td><a href="mailto:[email protected]?Subject=Ethics Bowl:&body=body" target="_top">[email protected]</a></td>
                            <td> school </td>
                        </tr>
                                <tr class="bowsettingperson">
                            <td> firstName </td>
                            <td> lastName </td>
                            <td> role</td>
                            <td><a href="mailto:[email protected]?Subject=Ethics Bowl:&body=body" target="_top">[email protected]</a></td>
                            <td> school </td>
                        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

JS

// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){

    // TODO: figure out a way to single out the email hyperlinks

    // set up an array to hold the row's data. Need to clear every time
    var bowl_setting_row_data = [];    

       // locate the current row you're on and push the data into the array.
    $('td', $(this).closest('tr')).each(function()
    {
        bowl_setting_row_data.push($(this).text());
    });

    // this is another part of the code which does not concern what I'm looking for
    //$('#dialog_bowl_setting_initial_dialog').dialog('open');  
});

Upvotes: 3

Views: 4165

Answers (3)

tcigrand
tcigrand

Reputation: 2397

You can also check directly to see if there is an href present.

Updated Fiddle

// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){

    if (e.target.href){
        return;
    }

    // TODO: figure out a way to single out the email hyperlinks

    // set up an array to hold the row's data. Need to clear every time
    var bowl_setting_row_data = [];    

       // locate the current row you're on and push the data into the array.
    $('td', $(this).closest('tr')).each(function()
    {
        bowl_setting_row_data.push($(this).text());
    });

    // this is another part of the code which does not concern what I'm looking for
    //$('#dialog_bowl_setting_initial_dialog').dialog('open');  
});

Upvotes: 0

Bobby Tables
Bobby Tables

Reputation: 3013

Catch the event on the hyperlink and stop it from bubbling.

$("#peoplelist tbody").on("click", "tr a", function (e) {
    e.stopPropagation();
});

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Make use of event.target and check its tagName

// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){

    if(e.target.tagName == 'A'){
        return;
    }

    // set up an array to hold the row's data. Need to clear every time
    var bowl_setting_row_data = [];    

       // locate the current row you're on and push the data into the array.
    $('td', $(this).closest('tr')).each(function()
    {
        bowl_setting_row_data.push($(this).text());
    });

    // this is another part of the code which does not concern what I'm looking for
    //$('#dialog_bowl_setting_initial_dialog').dialog('open');  
});

Upvotes: 5

Related Questions