Bootstrap子菜单链接不起作用

Question

I have seen this question all over the place and I have implemented multiple different solutions I have found but nothing seems to be working. I have a bootstrap collapsable menu in which contains submenus. When a submenu link is clicked, it simply closes the submenu and does not redirect to the link. I have implemented the following script which I had thought would do the trick:

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    setTimeout($.proxy(function() {
        if ('ontouchstart' in document.documentElement) {
            $(this).siblings('.dropdown-backdrop').off().remove();
        }
    }, this), 0);
});

This script allows the submenus to dropdown on touchscreen devices, but the links aren't working. I tried removing the e.preventDefault(); line, but that didn't seem to work either.

How can I get my submenu links to work on mobile touchscreens? They work fine on the desktop and when I hold down on the link on touchscreens I am able to open the correct link up in a new tab, but it doesn't work when you just tap it.

EDIT: Here is my a piece of the HTML:

<div class="span3">
    <li class="dropdown-submenu">
        <a href="#" tabindex='-1' class="dropdown-toggle nav-header" data-toggle="dropdown"><i class='icon-time'></i>Time Clock Management</a>
        <ul class='dropdown-menu'>
            <li><a href="#">Labor Scheduling</a></li>
            <li><a href="/change-manager/">Change Manager</a></li>
        </ul>
    </li>
</div>

Answer 1

I fixed this issue by adding the following javascript:

$('.dropdown-submenu ul.dropdown-menu li a').on('touchstart', function(e) {
    e.preventDefault();
    window.location.href = $(this).attr('href');
})