Need to modify a JQuery to not fire off of button clicks within a <TR> area

Question

I have a JQuery that expands and hides a TR and this TR serves as a "description area" that can expand/close when the TR above it (the Movie item) is clicked.

Here is an image to depict this, blue is the description area that each item expands when the TR above it (the Movie item) is clicked

The problem is that this description area expands whenever ANYTHING in the TR is clicked, I do not want this to occur for button clicks (and I cannot just add a .stopPropogation on buttons as they have their own scripts).

Could someone help me modify my row expansion script so that buttons do not activate this JQuery?

Thank you!

Here is my button and content (two TR's)

<tr>
     <td class="col-lg-3">
         <span class="item-display">
             <span style="font-size: 17px">
                    @Html.DisplayFor(modelItem => item.showtime)
             </span>
         </span>
         <span class="item-field">
                    @Html.EditorFor(modelItem => item.showtime)
             </span>
      </td>

      <td class="col-lg-3">
          <span class="item-display">
                <span style="font-size: 17px">
                    @Html.DisplayFor(modelItem => item.Location.Location1)
                </span>
           </span>
           <span class="item-field">
                    @Html.EditorFor(modelItem => item.Location.Location1)
                </span>
      </td>

      <td class="col-lg-3 col-lg-offset-3">
            <span style="visibility:hidden" class="ID col-lg-1">@Html.DisplayFor(modelItem => item.ID)</span>

            <span class="item-edit-button">
                  <button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
            </span>

            <span class="item-save-button">
                 <button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
            </span>

            <!-- Modal Button-->
            <span class="item-delete-button">
                  <button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
             <span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete
                   </button>
             </span>

             <!-- Modal -->
                 <div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                       <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Delete</h4>
                                </div>
                                <div class="modal-body">
                                    <span style="font-size: 20px">Are you sure you want to delete Employee: @Html.DisplayFor(modelItem => item.Location.Location1)?</span>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="button" onclick="deleteFunction(this)" class="btn btn-danger">Confirm Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>


            <tr>
                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        Show ID: @Html.DisplayFor(modelItem => item.ID)
                        <br />
                        Location ID: @Html.DisplayFor(modelItem => item.Location.ID)
                    </p>
                </td>
            </tr>

Here is the JQuery

<script>

    $(function () {
        $("td[colspan=12]").find("p").hide();
        $("td[colspan=12]").addClass("nopadding");

        $("tr").click(function () {
            var $target = $(this);
            var $detailsTd = $target.find("td[colspan=12]");
            if ($detailsTd.length) {
                $detailsTd.find("p").slideUp();
                $detailsTd.addClass("nopadding");
            } else {
                $detailsTd = $target.next().find("td[colspan=12]");
                $detailsTd.find("p").slideToggle();
                $detailsTd.toggleClass("nopadding");
            }
        });
    });

</script>

Answer 1

@TrueBlueAussie in comments gave you the correct answer. Either, if you want to 'turn off' expanding by any DOM element which contains onclick attribute you can set something like:

$("tr :not([onclick])").click(function () {
  ...
});

Answer 2

Inside the click handler you can simply check if the original target element was not a button:

JSFiddle: http://jsfiddle.net/j7LNE/

$(function () {
    $("td[colspan=12]").find("p").hide();
    $("td[colspan=12]").addClass("nopadding");

    $("tr").click(function (e) {
        if (!$(e.target).is('button')){
            var $target = $(this);
            var $detailsTd = $target.find("td[colspan=12]");
            if ($detailsTd.length) {
                $detailsTd.find("p").slideUp();
                $detailsTd.addClass("nopadding");
            } else {
                $detailsTd = $target.next().find("td[colspan=12]");
                $detailsTd.find("p").slideToggle();
                $detailsTd.toggleClass("nopadding");
            }
        }
    });
});

Apologies for using your source as the output HTML :)

Answer 3

You can do a check between event.target and this.

event.target is always the object which fired the event first, so you can check if it was your TR or the button.

Check this: http://api.jquery.com/event.target/