javascript - jQuery addClass targeting correct element - but only applying class sometimes -

javascript - jQuery addClass targeting correct element - but only applying class sometimes -

for context - i'm working on basic rails app designed spit out html templates based on parameters entered form. however, i'm running really unusual problem. using bootstrap 3, , have navigation includes dropdown submenu - because bootstrap removed feature bootstrap 3, i've had borrow code here working.

in jsfiddle works great, there's no point in creating one; indeed, on static info page works great. on every other page, works 10% of time, straight after refresh, , rest of time not respond. i've checked out what's going on in firebug , right element beingness targeted (which firebug shows highlighting in yellow) not having 'open' class added it.

i utterly baffled. bootstrap thing? rails thing? why sometimes working?!

edit - jquery in question. really basic.

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventdefault(); event.stoppropagation(); $(this).parent().toggleclass('open'); });

okay, may take several tries since can't test changes.

$('ul.dropdown-menu [data-toggle=dropdown]') jquery selector selects [data-toggle=dropdown] elements children of ul elements class dropdown-menu .

this ends selecting nil since there no ul elements class dropdown-menu.

i think want following:

$('.dropdown-toggle[data-toggle=dropdown]').on('click', function(event) { event.preventdefault(); event.stoppropagation(); $(this).parent().toggleclass('open'); //alert('clicked'); //console.log('clicked'); });

notice: - no <ul> tag. utilize <a> tag it's unnecessary. - no space between class , [data-toggle] since same element.

to test it, can uncomment either alert or consolelog lines. if it's working, should alert 1 time per click changes menu state.

testing selectors might find useful play around jquery selectors in browser's console. open console , send commands $('.dropdow-toggle'). display elements that selector selects. can root out lot of problems way.

javascript jquery ruby-on-rails twitter-bootstrap