title: Bootstrap: dropdown toggle items not functioning in Safari
body: <p>I have an angular 2 application that uses bootstrap 3.3.7 and jquery 1.12.4. The code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn-group"&gt;
  
                  &lt;button type="button" class="btn dropdown-toggle"
                          title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                          &gt;
                      &lt;span class="sr-only"&gt;More actions&lt;/span&gt;
                      &lt;i class="fa fa-ellipsis-v fa-lg" &gt;&lt;/i&gt;
                  &lt;/button&gt;
  
                  &lt;ul class="dropdown-menu dropdown-menu-right menu" role="menu"&gt;
                      &lt;li&gt;
                          &lt;button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
                                  &gt;
                              &lt;i class="fa fa-files-o" (click)="Copy($event)"&gt;&lt;/i&gt;
                              Copy
                          &lt;/button&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move"&gt;
                              &lt;i class="fa fa-arrows" (click)="Move($event)"&gt;&lt;/i&gt;
                              Move
                          &lt;/button&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share"&gt;
                              &lt;i class="fa fa-share " (click)="Share($event)"&gt;&lt;/i&gt;
                              Share
                          &lt;/button&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete"&gt;
                              &lt;i class="fa fa-trash" (click)="removeItem($event)"&gt;&lt;/i&gt;
                              Delete
                          &lt;/button&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The dropdown menu appears fine. But clicking on the individual buttons in the list is not invoking the associated event handler. This issue is occurring on Safari browser on iOS and Chrome on Android. However, it works perfectly on Edge and Chrome on the laptop/desktop.</p>
  
  <p>I have tried various solutions provided for earlier versions of Bootstrap on stackoverflow and github, but they aren't working.</p>
  
  <p>How do I get this to work?</p>