Clever Geek Handbook

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

I am developing a site with the following libraries:

  • Parse.js: 1.4.2
  • JQuery: 1.11.2 and 1.10.3 (UI)
  • Twitter Bootstrap: 3.3.4

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

As of now, if I click "ANYWHERE" on the line, the onclick listener is triggered but does not distinguish between hyperlinks. Whenever I click on an email hyperlink in my line, my dialog opens at the bottom and the default mailing program (like Outlook) opens at the same time, which is annoying. I mean, "if onclick grabs a hyperlink, don't open the dialog. Otherwise, if no hyperlink was touched by onclick, open the dialog."

I don't know how to distinguish between a generic click and one that points to a hyperlink. Any help is really appreciated!

Just in case, the code:

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:mystu@gmail.com?Subject=Ethics Bowl:&body=body" target="_top">mystu@gmail.com</a></td>
                            <td> school </td>
                        </tr>
                                <tr class="bowsettingperson">
                            <td> firstName </td>
                            <td> lastName </td>
                            <td> role</td>
                            <td><a href="mailto:mystu@gmail.com?Subject=Ethics Bowl:&body=body" target="_top">mystu@gmail.com</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 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');  
});
+3


source to share


3 answers


Use event.target

and test ittagName 



// 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 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');  
});
+4


source


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



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


source


You can also check if there is href

.

Updated script

// 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 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');  
});
0


source






More articles:


All Articles