I need to use javascript call functions from an append

Question

I need to use javascript call functions from an append

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

The question is this:

I have a <div> (content) that when doing a HOVER send a javascript function to show other <div> hidden. Also, those <div> hidden when you click on them also make a function.

The problem is that when you add another <div> (content) with .append() , it does not do the function HOVER , therefore neither do the functions of <div> hidden.

  <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>

javascript jquery

asked by Angel Sergio Ramírez 26.05.2017 в 23:12

source

2 answers

0

I managed to solve all my problems !! Thank you very much to all for your collaboration, especially to you Oscar :)

Analyzing your code I could understand and improve it, here is the script for anyone else who needs it!

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

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

/ * We mark the 'div' with the class 'hover' * / var obj = $ (' AngelRmz 8 minutes agoHello this message I peel it, loret de mola and sun pendejo, your tmb wey alv che joton culon efkjefbekjf e3kjfbkjfeb
'); $ ('. comments'). 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);

answered by 27.05.2017 в 01:34

BLOB type images stored in a table Synchronize Ajax

score 1 · Accepted Answer

When you generate new elements in the DOM these do not inherit the event managers that have been configured in previous calls to jQuery . There is no "memory" of those calls, so you must add the event manager again to the new elements.

On the other hand I do not recommend repeating several elements with the same id and much less searching for id if you do it. You should use, for example, a class to mark those to which you want to assign the event manager. I leave you at the end of the answer more data that may affect your code related to this fact.

I also recommend defining the functions as managers to be able to easily reuse them in different points of the code (once after loading the document and later every time you add new elements).

I give you the example of how to do the work with several event managers so that you understand the 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>

I used a sort of remove and put to manage to which element the manager needs to be added and thus avoid installing the same manager several times to the same element.

You can suffer many problems by defining several elements with the same id within the document.

For example, this call will not work as expected in all cases:

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

This is because jQuery usa document.getElementById to perform searches by id that returns only the first coincidence, so the repeated a posteriori additions will not be taken into account in the search and, therefore, looking for this id in these new branches will be unsuccessful.

Additionally, no page with multiple id repeated will be validated as correct HTML :

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

The id attribute specifies the unique identifier of the element ( ID ). The value must be unique throughout all IDs throughout the main subtree and must contain at least one character. The value can not contain any space character.