title: Bootstrap modal when activated inside tab
body: <p>Wanted to see if anyone could help me. I have an edit button that sits inside a table which sits inside bootstrap tabs. When I click the edit link to display modal window it doesnt work. However, when I move the same edit link outside of the tabs, it works like a charm. I think it has something to do with the way bootstrap utilizes jQuery to work the tabs. I'm a jQuery beginner so don't have enough knowledge to figure this out.</p>
  
  <p>Any help is appreciated</p>
  
  <p>Link to invoke modal</p>
  
  <pre><code> &lt;li&gt;&lt;a href="#" class="btn btn-xs btn-primary" class="editToDo" data-toggle="modal" data-target="#editToDoModal"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Modal Code</p>
  
  <pre><code>&lt;div class="modal fade" id="editToDoModal" tabindex="-1" role="dialog" aria-labelledby="editToDoModal"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="editToDoModalLabel"&gt;Edit To Do Item&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form method="post" action='{{url("/todo/")}}' class="editFormTodoModal" &gt;
                  {{csrf_field()}}
                  &lt;input type='hidden' name='_method' value='PATCH'&gt;
                  &lt;input type='hidden' name='event_id' value="{{$event-&gt;id}}"&gt;
  
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="message-text" class="control-label"&gt;Task:&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="description" value=""&gt;
                      {{--&lt;textarea class="form-control description auto_grow" name="description" id="to_do_description"&gt;&lt;/textarea&gt;--}}
                  &lt;/div&gt;
  
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Update&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is the tabs html</p>
  
  <pre><code>    &lt;ul class="nav nav-tabs"&gt;
             &lt;li class="active"&gt;&lt;a href="#tasks" data-toggle="tab"&gt;Tasks&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="#related_files" data-toggle="tab"&gt;Related Files&lt;/a&gt;&lt;/li&gt;
           &lt;li class=""&gt;&lt;a href="#event_staff" data-toggle="tab"&gt;Event Staff&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
  </code></pre>
  
  <p>And the code for the actual tabs
  <code>
   &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane active" id="tasks"&gt;
            There is a lot more code but the edit link sits here inside a table
        &lt;/div&gt;
      &lt;/div&gt;
  </code></p>