0

Estoy creando un blog de noticias, en la página de inicio se muestran las entradas del blog y en cada entrada tengo unos botones que aparecen al pasar el mouse sobre alguna entrada, en estos botones puedes editar, eliminar o archivar (pausar) la entrada. Mi problema es que cuando doy clic al botón de archivar (pausar) o eliminar, no hace nada, no detecta el clic.

Las entradas se muestran de la siguiente manera mediante el uso de una paginación:

Archivo index.php

···
<section class="catBlog relativo">
  <section class="catDesp" id="catDesp2">
    <a href="javascript:paginacion(1,'blog')" class="secCat" id="blg_btn">Blog</a>
    <a href="javascript:paginacion(1,'noticias')" class="secCat" id="ntc_btn">Noticias</a>
    <a href="javascript:paginacion(1,'eventos')" class="secCat" id="evt_btn">Eventos</a>
  </section>

  <div class="entradaDesp2">
    <span id="entradas">
      <?php include_once 'includes/funciones/paginacion.php'; ?>
    </span>
  </div>

</section>
···

Esto carga las entradas desde este archivo:

Archivo paginacion.php

  ···
  try {
    $stmt = $conn->prepare($sentencia);
    if ($cargo == 'admin') {
      $stmt->bind_param('s',$tipo_entrada);
    } else {
      $stmt->bind_param('sss',$tipo_entrada,$cargo,$usuario);
    }
    $stmt->execute();
    $elementos = $stmt->get_result();
    while ($ele = $elementos->fetch_all(MYSQLI_ASSOC)) {
      foreach ($ele as $artBajo) { ?>
        <section class="articulosBajos clearfix relativo animated fadeInUp" id="artIndex">
          <article class="articulo"><?php
            if ($artBajo["estado"] == "pausa") { ?>
              <div class="triangulo"></div><?php
            } ?>
            <img src="../img/imagen.jpg" alt="">
            <h2><?php echo $artBajo["titulo"] ?></h2>
            <p class="alto"><?php echo $artBajo["descripcion"] ?>...</p>
            <?php $id_blog = $artBajo["id_entrada"] ?>
          </article>
          <div class="contBtnIndex_pb btnIndex" data-id="<?=$id_blog?>" id="blg">
            <!-- EDITAR -->
            <a href="editar.php?entr=<?=$tipo?>&id=<?=$id_blog?>" style="display:flex;" class="btnIndex_pb edit">
              <i class="btn_act">/</i>
              <p class="btn_name">editar</p>
            </a> <!-- EDITAR --> <?php
            if ($artBajo["estado"] == "pausa") { ?>
            <!-- DESACTIVAR PAUSA -->
              <div style="display:flex;" class="btnIndex_pb pausa_inac">
                <input type="button" id="pausa_inac" class="btn_act" value="d">
                <label for="pausa_inac" class="btn_name">desarchivar</label>
              </div> <!-- DESCACTIVAR PAUSA --><?php
            } else { ?>
            <!-- ACTIVAR PAUSA -->
            <div style="display:flex;" class="btnIndex_pb pausa">
              <input type="button" id="pausar"  class="btn_act" value="a">
              <label for="pausa" class="btn_name">archivar</label>
            </div> <!-- ACTIVAR PAUSA --> <?php
            } ?>
            <div style="display:flex;" class="btnIndex_pb eliminar">
              <input type="button" id="eliminar"  class="btn_act" value="x" data-id="blg" id="<?=$id_blog?>">
              <label for="eliminar" class="btn_name">eliminar</label>
            </div>
          </div>
        </section> <?php
      //Final articulo
      }
    } $stmt->close();
  } catch (exception $e) {
    $error = $e->getMessage();
    $stmt->close();
  }
  // Final articulo

Y con jquery hago el llamado a ajax (pongo el evento de archivar solamente para ahorrar código, ya que para eliminar se usaría el mismo método):

Archivo main.js (Las variables están creadas previamente al comienzo del archivo)

    ···
    //Ajax pausar----------------------------------------
    $('#entradas').on('click','.articulosBajos .btnIndex .pausa',function(){
        parametros = {
            "pausar": this.find('.pausa').val(),
            "id": this.parents('div').attr('data-id'),
            "entr": this.parents('div').attr('id')
        }
        triangulo = $(this).parents('section').children('article');
        btn = $(this);
        e.preventDefault();
        console.log('pausar');
        $.ajax({
            method: 'POST',
            url: 'includes/funciones/pausar.php',
            data: parametros
        }).done(function(response) {
            // $(".resultado").html(response);
            triangulo.prepend('<div class="triangulo"></div>');
            btn.prev('a').after('<input type="button" class="btnIndex_pb pausa_inac" value="d">');
            btn.remove();
        });
    });

    $('#entradas').on('click','.btnIndex .pausa_inac',function(e){
        parametros = {
            "pausar_inac": this.val(),
            "id_inac": this.parents('div').attr('data-id'),
            "entr_inac": this.parents('div').attr('id')
        }
        triangulo = $(this).parents('section').children('article').children('div');
        btn = $(this);
        e.preventDefault();
        console.log('despausar');
        $.ajax({
            method: 'POST',
            url: 'includes/funciones/pausar.php',
            data: parametros
        }).done(function() {
            // $(".resultado").html(response);
            triangulo.remove();
            btn.prev('a').after('<input type="button" class="btnIndex_pb pausa" value="p">');
            btn.remove();
        });
    });

Tengo entendido que cuando se cargan elementos de forma dinámica, hay que buscar dicho elemento desde su selector de origen, en este caso lo busco desde $('#entradas') y le paso los selectores hijo hasta llegar al selector que quiero: $('#entradas').on('click','.articulosBajos .btnIndex .pausa',function()

Según lo que he aprendido debería funcionar, pero no es el caso. ¿Alguien sabe por qué?

4
  • Cuando un elemento tiene dos clases class="btnIndex_pb pausa" no se deben incluir espacios en el selector: $('#entradas').on('click','. articulosBajos .btnIndex.pausa', function() {}); La clase .articulosBajos sí se separa porque es el contenedor.
    – Triby
    el 5 may. 2021 a las 17:28
  • Gracias por el comentario, lamentablemente sigue sin funcionar.
    – Kdisell Q
    el 5 may. 2021 a las 18:43
  • Sí, me sobró un espacio en . articulosBajos, no sé de dónde salió, debería ser .articulosBajos
    – Triby
    el 5 may. 2021 a las 18:48
  • Yo lo corregí, lo puse tal cual va, pero sigue sin funcionar
    – Kdisell Q
    el 5 may. 2021 a las 19:12

1 respuesta 1

0

Cuando un elemento tiene dos clases class="btnIndex_pb pausa" no se deben incluir espacios en el selector: $('#entradas').on('click','. articulosBajos .btnIndex_pb.pausa', function() {}); La clase .articulosBajos sí se separa porque es el contenedor.

Adicionalmente, te recomiendo algunos cambios para generar un HTML correcto y simplificar la forma en que asignas eventos:

  • No repitas ID, estos deben ser únicos, siempre que necesites asignar ID en ciclos, agrega un sufijo, que puede ser ID del artículo: id="artIndex-<?=$id_blog?>". Debes hacerlo también con los enlaces, botones y en el for de las etiquetas (<label>).
  • Solo al contenedor de cada artículo asigna atributo de datos <section class="articulosBajos clearfix relativo animated fadeInUp" id="artIndex-<?=$id_blog?>" data-id="<?=$id_blog?>">
  • Asigna los eventos directamente a enlaces o botones y accede por la clase que tienen estos elementos, no su contenedor
  • Cuando se haga clic en alguno de los enlaces o botones, puedes obtener el padre y buscar el atributo de datos data-id en caso de necesitarlo

Revisa el HTML para ver lo que debes corregir (ID, clases, for de etiquetas, etc.).

// Enlace para editar: .edit es la clase del enlace
$('#entradas').on('click', '.articulosBajos .edit', function(e) {
    // Cancelar comportamiento normal de evento
    e.preventDefault();
    // $(this) es el enlace
    console.log($(this)[0]);
    // Obtener ID desde elemento padre (section)
    console.log($(this).closest('section').data('id'));
});

// Para desactivar: .pausa_inac es el contenedor, .btn_act es la clase del botón
$('#entradas').on('click', '.articulosBajos .pausa_inac .btn_act', function(e) {
    // Cancelar comportamiento normal de evento
    e.preventDefault();
    // $(this) es el botón
    console.log($(this)[0]);
});

// Para activar: .pausa es el contenedor, .btn_act es la clase del botón
$('#entradas').on('click', '.articulosBajos .pausa .btn_act', function(e) {
    // Cancelar comportamiento normal de evento
    e.preventDefault();
    // $(this) es el botón
    console.log($(this)[0]);
});

// Para eliminar: .eliminar es el contenedor, .btn_act es la clase del botón
$('#entradas').on('click', '.articulosBajos .eliminar .btn_act', function(e) {
    // Cancelar comportamiento normal de evento
    e.preventDefault();
    // $(this) es el botón
    console.log($(this)[0]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="entradas">
    <section class="articulosBajos clearfix relativo animated fadeInUp" id="artIndex-1" data-id="1">
          <article class="articulo">
              <div class="triangulo"></div>
            <img src="../img/imagen.jpg" alt="">
            <h2>Título</h2>
            <p class="alto">Descripción...</p>
          </article>
          <div class="contBtnIndex_pb btnIndex" id="blg-1">
            <!-- EDITAR -->
            <a href="editar.php?entr=1" style="display:flex;" class="btnIndex_pb edit">
              <i class="btn_act">/</i>
              <p class="btn_name">editar</p>
            </a> <!-- EDITAR -->
            <!-- DESACTIVAR PAUSA -->
              <div style="display:flex;" class="btnIndex_pb pausa_inac">
                <input type="button" id="pausa_inac-1" class="btn_act" value="d">
                <label for="pausa_inac-1" class="btn_name">desactivar</label>
              </div> <!-- DESCACTIVAR PAUSA -->
            <!-- ACTIVAR PAUSA -->
            <div style="display:flex;" class="btnIndex_pb pausa">
              <input type="button" id="pausar-1" class="btn_act" value="a">
              <label for="pausar-1" class="btn_name">activar</label>
            </div> <!-- ACTIVAR PAUSA -->
            <div style="display:flex;" class="btnIndex_pb eliminar">
              <input type="button" id="eliminar-1"  class="btn_act" value="x" id="eliminar-1">
              <label for="eliminar-1" class="btn_name">eliminar</label>
            </div>
          </div>
    </section>
</div>

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.