Eu estou tentando adicionar um ouvinte de clique jQuery depois de umdeterminado botão na página é clicado. Depois que o botão é clicado, você clica em qualquer lugar da página e o script será executado. O problema é que o manipulador é executado logo após você clicar no botão e não espera por um clique de "corpo". Aqui está o código:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<button data-stat="off" onclick="handler(this);">Click here</button>
</body>
<script>
function handler(btn){
if ($(btn).attr("data-stat")=="on"){
$(btn).attr("data-stat", "off");
console.log("A");
}
else {
$(btn).attr("data-stat", "on");
$(document).on("click", function (event) {
console.log("body clicked!");
$(this).unbind();
});
}
}
</script>
</html>
Respostas:
1 para resposta № 1Eu acho que você deve adicionar o tempo limite para acrescentar o ouvinte após o loop de evento atual:
function handler(btn){
if ($(btn).attr("data-stat")=="on"){
$(btn).attr("data-stat", "off");
console.log("A");
}
else {
$(btn).attr("data-stat", "on");
// add after 1 ms
setTimeout(function() {
$(document).on("click", function (event) {
console.log("body clicked!");
$(this).unbind();
});
}, 1);
}
}
1 para resposta № 2
O evento está borbulhando o DOM para que, quando você anexar um novo manipulador de eventos a um elemento pai, ele chame imediatamente. Existe um método chamado stopPropagation() que vai parar o evento borbulhando. Basta adicioná-lo ao seu handler() método.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<button data-stat="off" onclick="handler(this, event);">Click here</button>
</body>
<script>
function handler(btn, ev){
ev.stopPropagation();
if ($(btn).attr("data-stat")=="on"){
$(btn).attr("data-stat", "off");
console.log("A");
}
else {
$(btn).attr("data-stat", "on");
$(document).on("click", function (event) {
console.log("body clicked!");
$(this).unbind();
});
}
}
</script>
</html>