1

Estoy realizando una función que sirve para que cuando hagas click en el elemento .articulo, el contenido del elemento .articulos se modifique y en esa modificación se añaden dos botones .return que sirven para volver al estado anterior del elemento .articulos. La función funciona perfectamente, hace todo lo que tiene que hacer debidamente, no obstante, solo me sirve para hacer un click. Es decir:

  1. Hago click en .articulo
  2. Se despliega el nuevo contenido, modificándose el elemento .articulos
  3. Hago click en .return y vuelvo a tener el contenido que tenía antes del paso 1
  4. Vuelvo a hacer click en .articulo y no se me despliega el nuevo contenido --> ESTE ES EL PROBLEMA

EL navegador no me muestra ningún mensaje de error, por lo que creo que el problema radica en la llamada a la función. Aún así, no he conseguido encontrar el problema.

Adjunto código:

$(document).ready(function() {
  $('.articulo').click(function() {
    abrirArticulo();
  });
});

function abrirArticulo() {
  console.log('hagoClick');
  var titulo = $('.articulo .inverter h3').html();
  var tema = $('.articulo .inverter p').html();
  var imagen = 'img/prueba.png';
  var contenido = $('.texto').html();

  var antiguoContenido = $('.articulos').html();
  var nuevoCont = '';
  nuevoCont +=
    '<h1>' +
    titulo +
    '</h1>' +
    '<h3>' +
    tema +
    '</h3>' +
    '<div> <img class="imagenArt" src=" ' +
    imagen +
    '" alt="Imagen en el otro img" /></div>' +
    '<div>' +
    contenido +
    '</div>';

  $('.articulos').html(nuevoCont);
  $('.articulos').css({
    'background-color': 'white',
    'margin-top': '1%',
    padding: '2%',
    'border-radius': '1em'
  });

  $('.articulos').before("<div class='return'>Volver</div>");
  $('.articulos').after(
    "<div class='return' style='margin-top: 2%'>Volver</div>"
  );

  $('.return').click(function() {
    $('.articulos').html(antiguoContenido);
    $('.articulos').css({
      'background-color': '',
      padding: '0',
      'border-radius': '0',
      'margin-top': '0'
    });

    $('.return').remove();
  });

  $('.return').css({
    'background-color': 'rgb(238, 208, 124)',
    padding: '1%',
    width: '10%',
    'text-align': 'center'
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="articulos" id="cuerpo">
  <div class="articulo">
    <div class="artModoMovil">
      <div class="inverter">
        <h3>Título de articulo<small> Datos de publicación</small></h3>
        <p>Temática</p>
      </div>
      <div class="inverterImg">
        <img class="imagenArt" src="img/prueba.png" alt="Esto es una imagen de prueba">
      </div>
      <div class="texto">
        Esto es texto
        Esto es texto
        Esto es texto
        Esto es texto
        Esto es texto
        Esto es texto
        Esto es texto
        Esto es texto
      </div>
    </div>
    <a href="#">Leer más</a> <br>
    <small>Aquí va el autor</small>
  </div>
</div>

1
  • Opinión personal, pero creo que el manipular el html de esa forma dentro de una función js está muy mal. Los cambios que estás haciendo son netamente estéticos y perfectamente podrías hacerlo manteniendo ambas vistas en el html y cambiando su propiedad de estilo display con js, dependiendo si quieres mostrarlo u ocultarlo el 4 mar. 2020 a las 20:46

1 respuesta 1

1

No puedes utilizar click(), necesitas usar on() asi:

$(document).ready(function () {
    

    $(".articulos").on('click', '.articulo', function(){
        abrirArticulo();
    });

    //FUNCIONES PARA EL MODO MOVIL

    
});

function abrirArticulo() {
    console.log("hagoClick");
    var titulo = $(".articulo .inverter h3").html();
    var tema = $(".articulo .inverter p").html();
    var imagen = "img/prueba.png";
    var contenido = $(".texto").html();

    var antiguoContenido = $(".articulos").html();
    var nuevoCont = "";
    nuevoCont += "<h1>" + titulo + "</h1>" +
            "<h3>" + tema + "</h3>" +
            '<div> <img class="imagenArt" src=" ' + imagen + '" alt="Imagen en el otro img"/></div>' +
            "<div>" + contenido + "</div>";

    $(".articulos").html(nuevoCont);
    $(".articulos").css({
        "background-color": "white",
        "margin-top": "1%",
        "padding": "2%",
        "border-radius": "1em"
    });

    $(".articulos").before("<div class='return'>Volver</div>");
    $(".articulos").after("<div class='return' style='margin-top: 2%'>Volver</div>");

    $(".return").click(function () {
        $(".articulos").html(antiguoContenido);
        ;
        $(".articulos").css({
            "background-color": "",
            "padding": "0",
            "border-radius": "0",
            "margin-top": "0"
        });

        $(".return").remove();
    });

    $(".return").css({
        "background-color": "rgb(238, 208, 124)",
        "padding": "1%",
        "width": "10%",
        "text-align": "center"
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="articulos" id="cuerpo">
                        <div class="articulo">
                        <div class="artModoMovil">
                            <div class="inverter">
                                <h3>Título de articulo<small> Datos de publicación</small></h3>
                                <p>Temática</p>
                            </div>
                            <div class="inverterImg">
                                <img class="imagenArt" src="img/prueba.png" alt="Esto es una imagen de prueba">
                            </div>
                            <div class="texto">
                                Esto es texto
                                Esto es texto
                                Esto es texto
                                Esto es texto
                                Esto es texto
                                Esto es texto
                                Esto es texto
                                Esto es texto
                            </div>
                        </div>
                        <a href="#">Leer más</a> <br>
                        <small>Aquí va el autor</small>
                    </div>
                   </div>

2
  • Muchísimas gracias, me podrías explicar el uso del on() ??
    – Alexander
    el 4 mar. 2020 a las 22:27
  • Sirve para declarar handlers a elementos dinamicos, como en tu caso.
    – alanfcm
    el 4 mar. 2020 a las 23:06

Tu Respuesta

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

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