tengo un error que no he podido encontrar como solucionarlo.
tengo un input con una clase y un js y un css especial iborrainputfile
que hace que el input se vea agradable.
El problema es que cuando lo cargo desde el html funciona perfectamente, pero cuando lo genero atraves de js no funciona (esto, por que no se cuantas imagenes quiera subir el usuario), ya hice las pruebas y creo el segundo elemento bien con su nombre y su id perfectamente, pero no me sube la imgen al label.
/////////////////// Creo que el error pueda provenir de esta funcion, pero su sintaxis es desconocida para mi y no se como solucionarlo ////////////////////////
'use strict';
;( function ( document, window, index )
{
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
});
}( document, window, 0 ));
var contTitulo=0;
var numeroObs=0;
var numeroFoto=0;
function crearFoto() {
var nuevaFoto="";
nuevaFoto +="<div class='col-md-6' style='margin-bottom: 10px;''>";
nuevaFoto +="<div class='conten'>";
nuevaFoto += "<input style='text-align: center;' type='text' name='pieFoto_["+(contTitulo)+"]["+(numeroObs)+"]["+(numeroFoto+1)+"]' class='form-control' placeholder='Ingrese Pie-Foto'>";
nuevaFoto += "<input type='file' name='file_["+(contTitulo)+"]["+(numeroObs)+"]["+(numeroFoto+1)+"]' id='file_"+(contTitulo)+""+(numeroObs)+""+(numeroFoto+1)+"' class='inputfile inputfile-7'>";
nuevaFoto += "<label for='file_"+(contTitulo)+""+(numeroObs)+""+(numeroFoto+1)+"'>";
nuevaFoto += "<span class='iborrainputfile'>Ninguna Seleccion</span>";
nuevaFoto += "<strong>";
nuevaFoto += "<svg xmlns='http://www.w3.org/2000/svg' class='iborrainputfile' width='20' height='17' viewBox='0 0 20 17'><path d='M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z'></path></svg>";
nuevaFoto += "Seleccione Foto</strong>";
nuevaFoto += "</label>";
nuevaFoto +="</div>";
nuevaFoto +="</div>";
$('#divObs_'+contTitulo+''+numeroObs).append(nuevaFoto);
numeroFoto = numeroFoto +1;
}
/**********File Inputs**********/
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
max-width: 100%;
height: 40px;
font-size: 1.25rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
}
.inputfile + label svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
margin-top: -0.25em;
margin-right: 0.25em;
}
.JJinputfile {
font-size:16px;
font-weight:normal;
font-family: 'Lato';
}
/* style 7 */
.inputfile-7 + label {
color: #ec9b1b;
}
.inputfile-7 + label {
border: 1px solid #ec9b1b;
background-color: #fff;
padding: 0;
}
.inputfile-7:focus + label,
.inputfile-7.has-focus + label,
.inputfile-7 + label:hover {
border-color: #d47e03;
}
.inputfile-7 + label span,
.inputfile-7 + label strong {
padding: 0.625rem 1.25rem;
}
.inputfile-7 + label span {
width: 200px;
min-height: 2em;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
}
.inputfile-7 + label strong {
height: 100%;
color: #fff;
background-color: #ec9b1b;
display: inline-block;
}
.inputfile-7:focus + label strong,
.inputfile-7.has-focus + label strong,
.inputfile-7 + label:hover strong {
background-color: #d47e03;
}
@media screen and (max-width: 50em) {
.inputfile-7 + label strong {
display: block;
}
}
.conten{
border: 2px solid #ec9b1b;
background-color: #fff;
padding: 0;
border-radius: 5px;
}
/**********End File Inputs**********/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="titulos_0" class="col-md-12" style="margin-bottom: 15px; border: 1px solid #ccc; padding-top: 15px; padding-bottom: 15px ;">
<!-- contenedor de los titulos -->
<div class="col-md-12">
<label for="titulo_0" class="col-md-9 control-label" >Agregue un titulo</label>
<label id="masContenido_0" for="titulo" class="col-md-3 control-label masContenido_0" >Agregue Contenido</label>
<div class="col-md-10">
<input type="text" id="titulo_0" name="titulo_[0]" class="col-md-10 form-control ">
</div>
</div>
<!-- espacio para las fots -->
<div id="divObs_00" class="col-md-12" style="margin-top: 10px;">
<div class="col-md-6" style="margin-bottom: 10px;" >
<div class="conten">
<input style="text-align: center;" type="text" name="pieFoto_[0][0][0]" class="form-control" placeholder="Ingrese Pie-Foto">
<input type="file" name="file_[0][0][0]" id="file_000" class="inputfile inputfile-7">
<label for="file_000">
<span class="iborrainputfile">Ninguna Seleccion</span>
<strong>
<svg xmlns="http://www.w3.org/2000/svg" class="iborrainputfile" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>Seleccione Foto</strong>
</label>
</div>
</div>
</div>
<div id="masFotos_00" style="text-align: right; margin-right: 15px; ">
<label class="control-label">Agregar mas Fotos</label>
<button id="masFotos_00" type="button" class="btn btn-success" onclick="crearFoto()"><span class='glyphicon glyphicon-plus'></span></button>
</div>
<!-- Observvaciones -->
<div class="col-md-12">
<label for="observaciones_00" class="col-md-12 control-label" >Observaciones</label>
<input type="text" name="observaciones_[0][0]" class="form-control">
</div>
</div>
El problema creo que radica en la funcion de js que no se como hacer para se active cuando se se crea el nuevo input mediante js...
Espero haber sido claro y que me puedan colaborar....