touchend not triggered on ipad only
<p>In my html/js/css app, inside <code>$(document).ready(function)</code> I have the following code (copy-paste, verbatim):</p>

<pre><code>$(document).on('mousedown touchstart', '.button', function() {
    if(!$(this).hasClass('button-disabled')) {
        $(this).addClass('button-hover');
    }
}).on('mouseup touchend', '.button', function() {
    $(this).removeClass('button-hover');
});
</code></pre>

<p>The idea is to highlight buttons on mousedown or touchstart and remove the highlight on mouseup and touchend.  This works perfectly fine on desktop (osx, linux and windows) in all browsers.  This also works perfectly fine on Android (touch screen) and on iPhone 5S (I only have this model).  However on iPad, the hover class is being added correctly, yet it's not being removed.  When I debug the app on ipad using safari and put a breakpoint on line <code>$(this).removeClass('button-hover');</code> that breakpoint is never triggered.</p>

<p>Assigning events to each button individually is not an option, as there are literally hundreds of places in the app wherebuttons are created and destroyed dynamically as the app is running.</p>

<p>Unfortunately, the app is for a client that only uses it on an ipad - the app is explicitly designed for internal company use on ipads - so ignoring an issue on ipad isn't an option.  I tried to convince the client to forgo the highlighting - they refused and stated that it's critical to have it in the app.</p>

<p>Short of a it being a bug in safari on ipad, I can't think of any reason why this would be happening.  Any suggestions would be greatly appreciated.</p>