Can't toggle bootstrap dropdown nicely with knockout
<p>I'm trying to nest a dropdown inside an element which already has a click event bound to it. </p>

<p>I have disabled bubbling on the dropdown and created a clickhandler to trigger it manually by calling <code>$(...).dropdown()</code></p>

<p>When I try to trigger a dropdown the dropdown box requires two clicks at a minimum before it begins to work. </p>

<p>When you use <code>$(...).dropdown('toggle')</code> it works on the first click but after that the functionality is broken.</p>

<p>Here is a JSFiddle that exactly mimics my structure.</p>

<h1><a href="https://jsfiddle.net/fh8Lszav/" rel="nofollow noreferrer">JSFiddle</a></h1>