Olá!
Estou com problemas para lidar com eventos que ficam repetindo depois de serem executados. É assim, uso um evento .stop().mouseenter(), para focar um determinado elemento em uma classe especifica. Depois que o mouse é removido do elemento e posto novamente, o evento executa 2 vezes, se repito o processo de tirar e colocar o mouse, o evento repete 3, 4, 5, 6, 7, 8… infinitamente. Usei preventeDefault(), stopPropagation() coloquei .stop() antes do evento, e nada. Vou colocar um exemplo de código, de varias caixas de cadastros “IGUAIS”, que pega um lista de imagens e renderiza no navegador. O problema esta quando, tenta pegar imagens na segunda vez por diante.
O código é bem simples, basta ter a biblioteca jQuery (conferir a versão), e é só copiar e colar em um arquivo index.html e abrir no navegador (chrome ou firefox) que já está funcionando.
<!DOCTYPE html>
<html>
<head>
<title>Varios cadastros de produtos</title>
<!-- Preste atenção na versão e local da biblioteca Jquery -->
<!-- Preste atenção na versão e local da biblioteca Jquery -->
<script type="text/javascript" src="jquery-2.1.4.js" ></script>
<meta charset="utf-8" />
</head>
<body>
<div class="cadastrar_produtos" >
<div class="descricao">
<div>1 - O botão padrão (input type=file) que esta com borda vermelha, ficará oculto permitindo, que toda a area da caixa sirva para upload de imagens.</div>
<div>2 - Clique em qualquer local azul e selecione as imagens que desejar.</div>
</div>
<div class="cadastrar_produto" >
<input type="file" class="escolher_arquivo" accept="image/*" multiple />
<div class="nome_cadastro" >Caixa de cadastro 1</div>
<div>
<ul class="lista_imagens" >
</ul>
</div>
</div>
<div class="cadastrar_produto" >
<input type="file" class="escolher_arquivo" accept="image/*" multiple />
<div class="nome_cadastro" >Caixa de cadastro 2</div>
<div>
<ul class="lista_imagens" >
</ul>
</div>
</div>
<div class="cadastrar_produto" >
<input type="file" class="escolher_arquivo" accept="image/*" multiple />
<div class="nome_cadastro" >Caixa de cadastro 3</div>
<div>
<ul class="lista_imagens" >
</ul>
</div>
</div>
<div class="cadastrar_produto" >
<input type="file" class="escolher_arquivo" accept="image/*" multiple />
<div class="nome_cadastro" >Caixa de cadastro 4</div>
<div>
<ul class="lista_imagens" >
</ul>
</div>
</div>
</div>
<style type="text/css">
body {
font-size: 200%;
}
.cadastrar_produto {
width: 600px;
min-height: 200px;
padding: 20px;
background: #05f;
display: block;
margin: 10px;
float: left;
}
.cadastrar_produto:hover {
cursor: pointer;
background: #00f;
}
.escolher_arquivo {
border: 4px solid #f00;
padding: 2px;
font-size: 70%;
}
.nome_cadastro {
font-size: 200%;
color: #0f0;
}
.descricao {
clear:both;
font-size: 120%;
}
.cadastrar_produto ul {
margin: 0;
border: 0;
padding: 0;
}
.cadastrar_produto ul li {
display: inline-block;
text-decoration: none;
list-style: none;
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
margin-left: 5px;
margin-top: 5px;
}
.cadastrar_produto ul li img {
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Essa linha identifica em qual das caixas de cadastros sera enviado os arquivos
$(function renderizar_lista_imagem_produto(){
$(".cadastrar_produto").mouseenter(function(){
// Com esse codigo, apenas os botẽs e estilos da caixa selecionada serão modificados
var cadastrar_produto=$(this);
var escolher_arquivo=$(cadastrar_produto).find(".escolher_arquivo");
$(cadastrar_produto).stop().mouseup(function(){
$(escolher_arquivo).click();
});
function lista_arquivos_selecionados(evt) {
evt.stopPropagation();
evt.preventDefault();
var arquivos_escolhidos = evt.target.files;
var num_files=arquivos_escolhidos.length;
if(num_files==0){
} else if(num_files>0) {
$(cadastrar_produto).find(".lista_imagens")[0].innerHTML="";
for (var i = 0, f; f = arquivos_escolhidos[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var li = document.createElement('li');
li.innerHTML = ['<img src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
$(cadastrar_produto).find(".lista_imagens")[0].insertBefore(li, null);
};
})(f);
reader.readAsDataURL(f);
}
}
}
$(cadastrar_produto).find(".escolher_arquivo")[0].addEventListener('change', lista_arquivos_selecionados, false);
});
});
});
</script>
</body>
</html>