Problema evento Click

[cherallo94]

Hola buenas, estoy haciendo un proyecto de un backend con bootstrap y angularjs, como bootstrap me pedía jquery le incorpore también la librería JQuery.

El problema que tengo es que tengo este script:

Código:

$(document).ready(function(){
			$(".navbar li a").click(function(event) {
			// check if window is small enough so dropdown is created
				if(innerWidth < 768){
					$("#menu").collapse('hide');
				}
			});
		});

En algún momento me funciono, pero ahora no se porque no me funciona, lo utilizo para ocultar el navbar en dispositivos móviles mediante la función collapse que incorpora bootstrap.

He probado de ver que objetos me devuelve $(".navbar li a") y me devuelve los 2 links que quiero seleccionar correctamente, he probado la funcion $("#menu").collapse('hide'); y tmb funciona correctamente, he probado también de poner un alert antes del if para ver si entra pero ni siquiera entra al hacer click.

La finalidad de usar esto es que al hacer clic en móviles el menú se retraiga solo.

Que pensáis que puede ser? Hay incompatibilidad entre angularjs y jquery? Al usarlo en la misma web? Y en caso que si porque me funciono alguna vez.

Código:

<div class="collapse navbar-collapse" id="menu">
	<ul class="nav navbar-nav">
			<li><a href="#/prueba">Prueba</a></li>
			<li><a href="#/prueba/prueba2">Prueba</a></li>
	</ul>
	<p class="navbar-text navbar-right">{{userText}} {{username}}
		<button ng-click="salir()">{{salirText}}</button>
	</p>
</div>

Este seria el menu que se muestra y oculta con jquery y bootstrap

Gracias de antemano, me esta volviendo loco este tema.

[bathorz]

Clases a la vista: collapse, navbar-collapse, nav, navbar-nav, navbar-text, navbar-right.
¿En sónde está la clase navbar?

[cherallo94]

Iniciado por bathorz

Clases a la vista: collapse, navbar-collapse, nav, navbar-nav, navbar-text, navbar-right.
¿En sónde está la clase navbar?

Es una superior solo puse un pequeño fragmento pero también intente con coger la clase navbar-collapse con JQuery

Código:

<div class="row">
	<div class="col-md-* col-xs-*">
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#/">BackEnd</a>
				</div>
		<!-- NAVBAR INFO -->
				<div class="collapse navbar-collapse" id="menu">
	                            <ul class="nav navbar-nav">
			                <li><a href="#/prueba">Prueba</a></li>
			                <li><a href="#/prueba/prueba2">Prueba</a></li>
	                           </ul>
	                           <p class="navbar-text navbar-right">{{userText}} {{username}}
		                        <button ng-click="salir()">{{salirText}}</button>
	                           </p>
                              </div>
			</div>
		</nav>
	</div>
</div>

Este seria entero, perdón debería haberlo puesto

[Ktulu]

Hola,

La variable innerWidth donde la definis?

Saludos

[cherallo94]

Iniciado por Ktulu

Hola,

La variable innerWidth donde la definis?

Saludos

Buenas, innerWidth es una variable que la define el propio navegador y me dice la mida actual que tiene mi ventana, si haces al menos en chrome F12 en la consola escribes innerWidth veras que te devuelve la mida de tu ventana.

Incluso si en el propio ready del document haces una alert(innerWidth); me devuelve bien el valor de innerWidth, y luego si modifico el tamaño y llamo ha esta variable también se puede visualizar como el valor cambia.

Alguna tontería tiene que ser... seguro pero no soy capaz de darme cuenta.

Saludos.