Estoy trabajando con bootstrap-colorpicker para completar un valor de entrada de color con un contenido gráfico simple. Para dar algunos "colores de punta" traté de agregar el bootstrap-colorpicker predeterminado con algunos otros colores. Se parece a esto:

Default

With modification

Para lograr esto, agregué el siguiente código al final de la página. Básicamente, seleccionamos las cargas de color por sí mismas y luego agregamos el div deseado con los elementos.

$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();
    $('<div style="display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */"><div><small class="text-muted">Sugestões:</small><div style="display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;"><i class="fas fa-circle" style="top: 0px;margin:5px;color:#aaa;cursor:pointer" id="color_0" onclick=" alert('im working');"></i></div></div> </div>').insertAfter(".colorpicker-hue");
    $(".colorpicker").css("height","185px");
  }, 500);
});

El problema es que el evento de clic para fas fa-circle no funciona. Pongo alerta ("estoy trabajando"); solo para probar propone. No apareceré al hacer clic.

El código resultante después de jquery agrega los elementos es el siguiente:

[![resulting code][3]][3]
0
Fábio Araújo 9 may. 2019 a las 22:36

3 respuestas

La mejor respuesta

Todas las respuestas tienen excelentes consejos para usted, pero pueden haber pasado por alto el problema. De hecho, Ludovico le dio la respuesta, pero se incluyó en silencio con su otra información muy útil, por lo que quizás se la perdió.

Estás encontrando algo llamado delegación de eventos . Eso significa que los elementos recién agregados al DOM no tienen enlaces de clic asociados (aunque los haya definido en el código) porque no estaban en el DOM cuando los eventos de clic estaban vinculados a los elementos apropiados.

(Tenga en cuenta que "el DOM" es básicamente la página web living tal como aparece en su pantalla, con todas las modificaciones en tiempo real de javascript, etc. Así que es más que solo el código HTML.)

Muy simple de resolver esto, usando jQuery.

En lugar de:

$('#myID').click(function(){
    //your code here
});

Haz esto en su lugar:

$(document).on('click', '#myID', function(){
    //your code here
});

Lo que esto hace es vincular el evento click a algo que existe en el momento en que se representa el DOM (es decir, el objeto "documento"), y el método .on() de jQuery ahora observa el DOM para cualquier cosa más se inserta. Si algún elemento nuevo coincide con el elemento especificado, el evento de clic está vinculado a ese elemento cada vez que aparece en el DOM .

Referencias:

https://learn.jquery.com/events/event-delegation/

https://api.jquery.com/on/

http://jqfundamentals.com/chapter/events

2
cssyphus 9 may. 2019 a las 20:38

En general, debe tratar de evitar controladores de eventos en línea como onclick, especialmente cuando trabaje con jQuery, que proporciona una interfaz bastante flexible para el enlace de eventos.

Podría adoptar este enfoque en su lugar:

$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();

    $(".colorpicker").css("height","185px");


    /* Compose suggestions into a local variable */
    var suggestions = $('<div style="display:block; width:130px; height:100px; position:absolute; top:104px;"><div><small class="text-muted">Sugestões:</small><div style="display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;"><i class="fas fa-circle" style="top: 0px;margin:5px;color:#aaa;cursor:pointer" id="color_0"></i></div></div> </div>')

    /* select .fas elements from suggestions and assign click handler that way */
    $('.fa-circle', suggestions).click(function() {

        alert("I'm working");
        return false;
    })

    /* Insert suggestions */
    suggestions.insertAfter(".colorpicker-hue");
  }, 500);
})
0
Dacre Denny 9 may. 2019 a las 20:32

El código utilizado para crear e insertar sus elementos DOM no está formateado correctamente. Hay comillas sin tapar dentro de otras comillas:

enter image description here

Para resolver esto, puede escapar las comillas internas de esta cadena larga (consulte aquí para más detalles), pero prefiero recomendar que declare su controlador de eventos en una declaración separada (esto hará que su código sea más fácil de leer y mantener):

$('body').on("click", ".fa-circle", function() {
    alert("click!");
});

Además, le recomiendo que extraiga todo el CSS en línea. Hará tu vida mucho más fácil. Algo como esto:

<script>
$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();
    $('<div id="container"><div><small class="text-muted">Sugestões:</small><div id="inner"><i class="fas fa-circle" id="color_0"></i></div></div> </div>').insertAfter(".colorpicker-hue");
    $(".colorpicker").css("height","185px");
  }, 500);

  $('body').on("click", ".fa-circle", function() {
    alert("I'm working!");
  });

});
</script>

<style>
#container{
  display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */
}
#inner {
  display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;
}
#color_0{
  top: 0px;margin:5px;color:#aaa;cursor:pointer
}
</style>
0
ludovico 9 may. 2019 a las 20:11