2

La cuestión es ésta:

Tengo un <div> (contenido) que al hacer un HOVER manda llamar una función javascript para mostrar otros <div> ocultos. Además, esos <div> ocultos al hacerles clic también hacen una función.

El problema es que al agregar otro <div> (contenido) con .append(), no hace la función HOVER, por lo tanto tampoco las funciones de los <div> ocultos.

  <div id="container" class="boxs">

        <div id="title" class="bg-blue">Comentarios</div><hr/>

        <div id="box-content" class="comentarios">

          <div id="comentario-contenido">
            <div id="comentario-avatar">
              <img src="https://www.habbo.es/habbo-imaging/avatarimage?user=OficialEmilio&amp;direction=2&amp;head_direction=2&amp;gesture=sml&amp;action=null&amp;size=" style="margin-top:-7px"/>
            </div>
            <div id="comentario-info">
              <b>AngelRmz</b> hace 8 minutos
              <div id="comentario-botones" data-id="2" style="display:none">
                <div id="comentario-boton"  class="comentario-informar" title="Informar"></div>
                <div id="comentario-boton"  class="comentario-eliminar" title="Eliminar"></div>
                <div id="comentario-boton"  class="comentario-editar" title="Editar"></div>
                <div id="comentario-boton"  class="comentario-guardar" title="Guardar"></div>
              </div>
            </div>
            <div id="comentario">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

            </div>
          </div><br>

          <center id="ShowMore">Mostrar más</center>



          <!--</div>-->
        </div>
      </div>
    </div>


    <script>
    var comentarioId = 0;
    var selectionDiv;
    var display  = true;

$('#ShowMore').click(function(){

  var obj = $('<div id="comentario-contenido"><div id="comentario-avatar"><img src="https://www.habbo.es/habbo-imaging/avatarimage?user=OficialEmilio&amp;direction=2&amp;head_direction=2&amp;gesture=sml&amp;action=null&amp;size=" style="margin-top:-7px"/></div><div id="comentario-info"><b>AngelRmz</b> hace 8 minutos<div id="comentario-botones" data-id="2" style="display:none"><div id="comentario-boton"  class="comentario-informar" title="Informar"></div><div id="comentario-boton"  class="comentario-eliminar" title="Eliminar"></div><div id="comentario-boton"  class="comentario-editar" title="Editar"></div><div id="comentario-boton"  class="comentario-guardar" title="Guardar"></div></div></div><div id="comentario">Hola este mensaje me la pela, loret de mola e sun pendejo, tu tmb wey alv che joton culon efkjefbekjf e3kjfbkjfeb</div></div><br>');
  $('.comentarios').append(obj);

});

$('[id="comentario-contenido"]').hover(function() {

  _parent = $(this).parents('#box-content');
  if(_parent.children('#comentario-contenido').hasClass("active"))
  {
    display = false;
    //_parent.children('#comentario-contenido').addClass("alv");
    if(_parent.children('.active').find('#comentario-botones').fadeOut()){
      _parent.children('#comentario-contenido').removeClass('active');
      display = true;
    }

  }
  if(display == true){
    $(this).addClass('active');
    $(this).find('#comentario-botones').fadeIn();
  }
}, function() {
      $(this).find('#comentario-botones').fadeOut();

      $(this).removeClass('active');
});

$('[id="comentario-boton"]').click(function(){
  comentarioId = $(this).parents('#comentario-botones').attr("data-id");
  selectionDiv = $(this).parents('#comentario-contenido');
});

$('.comentario-eliminar').click(function(){
    sweetAlert(
      {
        title: "¿Estas seguro?",
        text: "Este comentario ya no sera visible para todos!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Eliminar",
        cancelButtonText: "Cancelar",
        closeOnConfirm: false,
        closeOnCancel: false
      },
      function(isConfirm)
      {
        if (isConfirm) {
          selectionDiv.fadeOut( "slow");
          swal("Realizado!", "Comentario eliminado con exito ." + comentarioId, "success");
        } else {
          swal("Cancelado", "El comentario no fue eliminado", "error");
        }
      });
  });

    </script>
1
  • Gracias! actualice el post con el código dentro :D ¡Espero alguien que me pueda ayudar con esto! el 26 may. 2017 a las 21:19

2 respuestas 2

1

Cuando generas nuevos elementos en el DOM éstos no heredan los gestores de eventos que se hayan configurado en llamadas anteriores a jQuery. No existe "memoria" de esas llamadas, por lo que debes agregar de nuevo el gestor de eventos a los nuevos elementos.

Por otro lado no te recomiendo repetir varios elementos con el mismo id y mucho menos hacer búsquedas por id si lo haces. Deberías usar, por ejemplo, una clase para marcar aquellos a los que quieras asignar el gestor de eventos. Te dejo al final de la respuesta más datos que pueden afectar tu código relacionado con este hecho.

También te recomiendo definir como funciones los gestores para poder reutilizarlos fácilmente en diferentes puntos del código (una vez tras la carga del documento y más tarde cada vez que agregues elementos nuevos).

Te dejo el ejemplo de cómo hacer el trabajo con varios gestores de eventos para que entiendas la idea:

var comentarioId = 0;
var selectionDiv;
var display = true;

$('#ShowMore').click(function() {
  /* Marcamos el 'div' con la clase 'hover' */
  var obj = $('<div id="comentario-contenido" class="hover"><div id="comentario-avatar"><img src="https://www.habbo.es/habbo-imaging/avatarimage?user=OficialEmilio&amp;direction=2&amp;head_direction=2&amp;gesture=sml&amp;action=null&amp;size=" style="margin-top:-7px"/></div><div id="comentario-info"><b>AngelRmz</b> hace 8 minutos<div id="comentario-botones" data-id="2" style="display:none"><div id="comentario-boton"  class="comentario-informar boton" title="Informar"></div><div id="comentario-boton"  class="comentario-eliminar eliminar" title="Eliminar"></div><div id="comentario-boton"  class="comentario-editar" title="Editar"></div><div id="comentario-boton"  class="comentario-guardar" title="Guardar"></div></div></div><div id="comentario">Hola este mensaje me la pela, loret de mola e sun pendejo, tu tmb wey alv che joton culon efkjefbekjf e3kjfbkjfeb</div></div><br>');
  $('.comentarios').append(obj);
  /* Tras agregar los nuevos elementos buscamos el que lleva
    la clase "hover" para agregarle el gestor de eventos */
  $('.comentarios div.hover').each(function(indice) {
    /* Eliminamos la clase para que no se le vuelva a agregar
      el gestor de eventos de nuevo más adelante */
    $(this).removeClass('hover');
    /* Le agregamos el gestor para el evento "hover" */
    $(this).hover(funcion_hover1, funcion_hover2);
  });
  $('.comentarios div.boton').each(function(indice) {
    /* Repetimos el trabajo con "boton" */
    $(this).removeClass('boton');
    $(this).click(funcion_click_boton);
  });
  $('.comentarios div.eliminar').each(function(indice) {
    /* Repetimos el trabajo con "eliminar" */
    $(this).removeClass('eliminar');
    $(this).click(funcion_click_eliminar);
  });
});

/* Definimos el gestor de eventos de entrada del ratón */
function funcion_hover1() {
  _parent = $(this).parents('#box-content');
  if (_parent.children('#comentario-contenido').hasClass("active")) {
    display = false;
    //_parent.children('#comentario-contenido').addClass("alv");
    if (_parent.children('.active').find('#comentario-botones').fadeOut()) {
      _parent.children('#comentario-contenido').removeClass('active');
      display = true;
    }

  }
  if (display == true) {
    $(this).addClass('active');
    $(this).find('#comentario-botones').fadeIn();
  }
}

/* Definimos el gestor de eventos de salida del ratón */
function funcion_hover2() {
  $(this).find('#comentario-botones').fadeOut();

  $(this).removeClass('active');
}


function funcion_click_boton() {
  comentarioId = $(this).parents('#comentario-botones').attr("data-id");
  selectionDiv = $(this).parents('#comentario-contenido');
}

function funcion_click_eliminar() {
  sweetAlert({
      title: "¿Estas seguro?",
      text: "Este comentario ya no sera visible para todos!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Eliminar",
      cancelButtonText: "Cancelar",
      closeOnConfirm: false,
      closeOnCancel: false
    },
    function(isConfirm) {
      if (isConfirm) {
        selectionDiv.fadeOut("slow");
        swal("Realizado!", "Comentario eliminado con exito ." + comentarioId, "success");
      } else {
        swal("Cancelado", "El comentario no fue eliminado", "error");
      }
    });
}

/* Llamadas iniciales */
$('[id="comentario-contenido"]').hover(funcion_hover1, funcion_hover2);
$('[id="comentario-boton"]').click(funcion_click_boton);
$('.comentario-eliminar').click(funcion_click_eliminar);
.comentario-informar::before { 
  content: "[I]";
}
.comentario-eliminar::before { 
  content: "[D]";
}
.comentario-editar::before { 
  content: "[E]";
}
.comentario-guardar::before { 
  content: "[G]";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="boxs">
  <div id="title" class="bg-blue">Comentarios</div>
  <hr/>
  <div id="box-content" class="comentarios">
    <div id="comentario-contenido">
      <div id="comentario-avatar">
        <img src="https://www.habbo.es/habbo-imaging/avatarimage?user=OficialEmilio&amp;direction=2&amp;head_direction=2&amp;gesture=sml&amp;action=null&amp;size=" style="margin-top:-7px"/>
      </div>
      <div id="comentario-info">
        <b>AngelRmz</b> hace 8 minutos
        <div id="comentario-botones" data-id="2" style="display:none">
          <div id="comentario-boton"  class="comentario-informar" title="Informar"></div>
          <div id="comentario-boton"  class="comentario-eliminar" title="Eliminar"></div>
          <div id="comentario-boton"  class="comentario-editar" title="Editar"></div>
          <div id="comentario-boton"  class="comentario-guardar" title="Guardar"></div>
        </div>
      </div>
      <div id="comentario">
        Hola este mensaje me la pela, loret de mola e sun pendejo, tu tmb wey alv che joton culon efkjefbekjf e3kjfbkjfeb
      </div>
    </div>
    <br>
    <center id="ShowMore">Mostrar más</center>
  </div>
</div>

He usado una clase de quita y pon para gestionar a qué elemento hay que agregarle el gestor y así evitar instalar varias veces el mismo gestor al mismo elemento.


Puedes sufrir multitud de problemas por definir varios elementos con el mismo id dentro del documento.

Por ejemplo, esta llamada no funcionará como esperas en todos los casos:

$(this).find('#comentario-botones')...

Esto es debido a que jQuery usa document.getElementById para realizar las búsquedas por id que devuelve únicamente la primera coincidencia, por lo que los añadidos a posteriori repetidos no se tendrán en cuenta en dicha búsqueda y, por lo tanto, buscar dicho id en esas nuevas ramas será infructuoso.

Además, ninguna página con múltiples id repetidos serán validados como HTML correcto:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

El atributo id especifica el identificador único del elemento (ID). El valor debe ser único a lo largo de todos los IDs en todo el subárbol principal y debe contener al menos un carácter. El valor no puede contener ningún carácter de espacio.

7
  • Que tal Oscar, gracias por tu colaboración! Un pequeño detalle... funciono para mostrar los divs ocultos al pasar el ratón, sin embargo las funciones de los divs que se mostraron no funcionan :( el 26 may. 2017 a las 21:58
  • El hover sí, ¿verdad? el 26 may. 2017 a las 21:59
  • Si, pero necesito que también haga las funciones que traen consigo los divs que se mostraron el 26 may. 2017 a las 22:06
  • Bueno, pues dame un tiempo, te puse en la respuesta que sólo te ponía ese como ejemplo de cómo debes hacerlo, pensé que te vendría bien intentar hacer tú lo mismo con el resto. el 26 may. 2017 a las 22:08
  • Ya está, he cubierto los tres eventos. El hover del <div> principal y los dos eventos click adicionales. el 26 may. 2017 a las 22:23
0

Logre solucionar todos mis problemas!! Muchas gracias a todos por su colaboración, sobre toda a ti Oscar :)

Analizando tú código pude comprender y mejorarlo, aquí les dejo el script por si alguien más lo necesita!

var comentarioId = 0;
var selectionDiv;
var display  = true;

$('#ShowMore').click(function() {

/* Marcamos el 'div' con la clase 'hover' */ var obj = $('AngelRmz hace 8 minutosHola este mensaje me la pela, loret de mola e sun pendejo, tu tmb wey alv che joton culon efkjefbekjf e3kjfbkjfeb
'); $('.comentarios').append(obj);

  obj.hover(funcion_hover1, funcion_hover2);
  selectionDiv = obj;
  obj.find('#comentario-boton').click(comentario_botones);
  obj.find('.comentario-eliminar').click(comentario_eliminar);

});

function funcion_hover1(){
  _parent = $(this).parents('#box-content');
  if(_parent.children('#comentario-contenido').hasClass("active"))
  {
    display = false;
    //_parent.children('#comentario-contenido').addClass("alv");
    if(_parent.children('.active').find('#comentario-botones').fadeOut()){
      _parent.children('#comentario-contenido').removeClass('active');
      display = true;
    }

  }
  if(display == true){
    $(this).addClass('active');
    $(this).find('#comentario-botones').fadeIn();
  }
}

function funcion_hover2(){
  $(this).find('#comentario-botones').fadeOut();
  $(this).removeClass('active');
}
function comentario_botones() {
  comentarioId = $(this).parents('#comentario-botones').attr("data-id"); //recuperar el ID del comentario donde se hace la accion
  selectionDiv = $(this).parents('#comentario-contenido'); //recuperar div para mas tarde borrarlo o ediatrlo
}

function comentario_eliminar() {
    sweetAlert(
      {
        title: "¿Estas seguro?",
        text: "Este comentario ya no sera visible para todos!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Eliminar",
        cancelButtonText: "Cancelar",
        closeOnConfirm: false,
        closeOnCancel: false
      },
      function(isConfirm)
      {
        if (isConfirm) {
          selectionDiv.fadeOut( "slow");
          swal("Realizado!", "Comentario eliminado con exito ." + comentarioId, "success");
        } else {
          swal("Cancelado", "El comentario no fue eliminado", "error");
        }
      });
  }

  $('[id="comentario-contenido"]').hover(funcion_hover1, funcion_hover2);
  $('[id="comentario-boton"]').click(comentario_botones);
  $('.comentario-eliminar').click(comentario_eliminar);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.