Primeiramente, sua variável removeClass
não está definida, isto pode acabar misturando com variaveis de um level superior ou globais, portanto sempre use var ...
Ou coisa, evite criar os eventos no "primeiro level" do javascript (seria o level global), algo como:
<script>
var oi = 1;
</script>
Prefira algo como:
<script>
(function () {
var oi = 1;
}());
</script>
Assim você pode evitar misturar as variáveis
Dando seguimento com isto algo que você poderia fazer seria usar o evento .on
do Jquery ao invés de .click
(equivalente ao .bind("click",
)
Os eventos .on
verificam modificações no DOM
, se for adicionado um objeto novo ele automaticamente aplica o evento. Digo isto pois, pois acredito que o você esteja tentando adicionar o evento .click
, quando o objeto ainda não foi renderizado.
Um exemplo de .on
seria:
$(document).on("click", "SELETOR", function () { console.log("Test..."); });
No seu caso, o seu script poderia trabalhar assim:
(function () { //"Isola" as variáveis
var removeClass = false;//Define a variável
//Configura o click para o elemento .toggle-canvas, assim que este "existir"
$(document).on("click", ".toggle-canvas", function () {
$("#menu-canvas").toggleClass('menu-canvas-active');
removeClass = false;
});
//Configura o click para o elemento #menu-canvas, assim que este "existir"
$(document).on("click", "#menu-canvas", function() {
removeClass = false;
});
//Não é necessário .on aqui, pois o document é um dos primeiros elementos "dentro do javascript" a existirem
$(document).click(function () {
if (removeClass) {
$("#menu-canvas").removeClass("menu-canvas-active");
}
removeClass = true;
});
}());
$(document)
em vez de$("html")
?addClass
, qualquer método de jQuery funciona em qualquer dispositivo, incluindo smartPhones.touchend
junto aoclick
?