Twitter Bootstrap Question posted in

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

I am developing a site with the following libraries:

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

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');  
});
Tags:

3

Answers


  1. 0

    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');  
});
    Login or Signup to reply.
  2. 0

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

    $("#peoplelist tbody").on("click", "tr a", function (e) {
    e.stopPropagation();
});
    Login or Signup to reply.
  3. 0

    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');  
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search