Wordpress Menu + Bootstrap NavBar

Question

I'm now stuck with this problem below, and I hope you can help me out. I would really appreciate it.

1st -- I created the Wordpress Menu (got it all worked). 2nd -- I implemented the Bootstrap classes (eg nav navbar-nav, dropdown, dropdown-menu etc..) on the html tags of the Wordpress Menu. (got it and made it work somehow) 3rd -- To make the dropdowns work I used (preg_place) to replace the default (submenu) to (dropdown-menu) then to make the function work I used the (preg-replace) again to INSERT a class and data-toggle to the Anchor Links.

Now the problem is, the anchor links doesn't seem to function right at all.

check it out here. (use the navs on top)

HEres the code on the function.php

function new_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="dropdown-menu" /',$menu);  
return $menu;  
}
add_filter('wp_nav_menu','new_submenu_class');

function add_menuclass($ulclass) {
$ulclass = preg_replace('/<a/', '<a class="dropdown-toggle" data-toggle="dropdown" role="button"', $ulclass);
return $ulclass;
}
add_filter('wp_nav_menu','add_menuclass');

Thanks much guys!

And btw.. i used a jQuery for the 3rd level submenu. which is:

<script type="text/javascript">
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if(!$parent.parent().hasClass('nav')) {
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
    }

    $('.nav li.open').not($(this).parents("li")).removeClass("open");

    return false;
});
});

</script>

Answer 1

In the function, I would try to change this line:

$('.navbar a.dropdown-toggle').on('click', function(e) {

For this one:

$('.navbar').on('click', 'a.dropdown-toggle', function(e) {

Since a.dropdown-toggle has been happended...
Maybe it was not present on "document ready", so the " delagation " syntax could help.