1

Buen día, estoy trabajando con un calendario que se genera con Jquery entonces genera una tabla que trae unos años. Adjunto una imagen de como se ve: introducir la descripción de la imagen aquí

La tabla se genera de manera dinámica, creando este codigo:

<div id="calendar">
<div class="calendar-header panel panel-default">
<table>
<th class="prev"><span class="glyphicon glyphicon-chevron-left"></span></th>
<th class="year-title year-neighbor2 hidden-sm hidden-xs">2016</th>
<th class="year-title year-neighbor hidden-xs">2017</th>
<th class="year-title">2018</th>
<th class="year-title year-neighbor hidden-xs">2019</th>
<th class="year-title year-neighbor2 hidden-sm hidden-xs">2020</th>
<th class="next"><span class="glyphicon glyphicon-chevron-right"></span></th>
</table>
</div>

Con esta función quiero traer ese valor, el alerta no muestra nada al momento del click:

 $("table th").click(function(){
        var x=($(this).html());
      alert(x);
    });

Pero no lo trae, quiero suponer que es porque el código no está en el documento, si no que se genera. ¿Hay alguna forma de traer ese valor? estoy usando bootstrap-years-calendar

9
  • Buen día, puedes guiarte de la sig. url: es.stackoverflow.com/questions/144603/… Saludos, espero te sea de utilidad. Commented el 13 abr. 2018 a las 15:56
  • Ya checaste el html en las herramientas de desarrollador del explorador?
    – DMG
    Commented el 13 abr. 2018 a las 15:56
  • Cuando haces click, que sale en el alert?
    – alanfcm
    Commented el 13 abr. 2018 a las 15:57
  • deberias de colocarla libreria con la que estas trabajando Commented el 13 abr. 2018 a las 16:00
  • Probando lo que viene en ese enlace si funciona pero no existe como tal el código en el archivo a que me refiero con esto que solo se llama el calendario: <div id="calendar"></div>
    – Loosey
    Commented el 13 abr. 2018 a las 16:03

3 respuestas 3

2

Buen día, relacionado a tu inquietud podrías hacer algo como lo siguiente:

$("#divContenedor table th").on('click',function(){
  var data = $(this).text();
  console.info(data);
});

Ahora bien el plugin del calendar puede estar generando la tabla de forma dinámica así que tocaría si es eso hacerlo con un listener dinámico como el siguiente:

$(document).on('click','"#divContenedor table th"',function(){
      var data = $(this).text();
      console.info(data);
    });

Lo del id "divContenedor" que enuncio es para generar una búsqueda con selectores css mas especifica, porque pueden haber otras tablas dentro del DOM, la idea es que revises si hay algún elemento ya sea span, div etc... que sea contenedor de tu th o tu table, dependiendo de que tanto demore en construir tu plugin el html en el DOM, será necesario usar un timeout para que dé el tiempo requerido y cuando haga la consulta ya exista el elemento, por tanto te comparto un ejemplo de como podrías hacer un timeOut:

$(function() {

  $("#calendar").calendar();

  setTimeout(function(){ 
    lecturaCampo();
  }, 5000);


 function lecturaCampo(){
   $(document).on('click','"#calendar table th"',function(){
          var data = $(this).text();
          console.log(data);
   });
 }

});

Espero te sea de utilidad, saludos.

8
  • Gracias por responder actualice la pregunta entonces en mi caso quedaría de la siguiente forma: $(document).on('click','"#calendar table th"',function(){ var data = $(this).text(); alert(data); });
    – Loosey
    Commented el 13 abr. 2018 a las 16:25
  • Hola David, según veo seria que modifiques divContenedor por calendar y uses la segunda forma que te muestro, ya que es generado dinámicamente la tabla por el plugín que estas utilizando... Commented el 13 abr. 2018 a las 16:26
  • Si eso hice solo tengo una pregunta cuando se genera esa tabla hay un div antes no tendría problema para ingresar a la tabla?
    – Loosey
    Commented el 13 abr. 2018 a las 16:29
  • En realidad no, lo que sucede es que tu en jquery puedes utilizar selecctores css y en ese orden de ideas ingresas exactamente a la tabla con e listener dinamico... te dejo una url sobre selectores css: librosweb.es/libro/css/capitulo_2/selectores_basicos.html Commented el 13 abr. 2018 a las 16:31
  • Lo probé no me funciono: $(document).on('click','"#calendar table th"',function(){ var data = $(this).text(); alert(data); });
    – Loosey
    Commented el 13 abr. 2018 a las 16:46
1

cuando Jquery agrega un evento, practicamente escribe el evento sobre el elemento encontrado, si al momento en el que unes el evento el elemento aun no existe, entonces no lo va a acoplar,

debes anadir la funcion click despues de que la tabla fue creada.

si la tabla es recreada, eso tambien borrara el evento de tu tabla.

0

la libreria intercepta los eventos te dejo aqui con un ejemplo solo coloque console.log

$(function() {

var currentYear = new Date().getFullYear();

$('#calendar').calendar({ 
    enableContextMenu: true,
    enableRangeSelection: true,
    renderEnd: function(e){
      console.log("cklick year")
    },
    clickDay: function(e) {
       console.log("clickDay");
    },
    mouseOutDay: function(e) {
        console.log("d")
    },
    dayContextMenu: function(e) {
       console.log("d")
    },
    dataSource: [
        {
            id: 0,
            name: 'Google I/O',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 4, 28),
            endDate: new Date(currentYear, 4, 29)
        },
        {
            id: 1,
            name: 'Microsoft Convergence',
            location: 'New Orleans, LA',
            startDate: new Date(currentYear, 2, 16),
            endDate: new Date(currentYear, 2, 19)
        },
        {
            id: 2,
            name: 'Microsoft Build Developer Conference',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 3, 29),
            endDate: new Date(currentYear, 4, 1)
        },
        {
            id: 3,
            name: 'Apple Special Event',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 8, 1),
            endDate: new Date(currentYear, 8, 1)
        },
        {
            id: 4,
            name: 'Apple Keynote',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 8, 9),
            endDate: new Date(currentYear, 8, 9)
        },
        {
            id: 5,
            name: 'Chrome Developer Summit',
            location: 'Mountain View, CA',
            startDate: new Date(currentYear, 10, 17),
            endDate: new Date(currentYear, 10, 18)
        },
        {
            id: 6,
            name: 'F8 2015',
            location: 'San Francisco, CA',
            startDate: new Date(currentYear, 2, 25),
            endDate: new Date(currentYear, 2, 26)
        },
        {
            id: 7,
            name: 'Yahoo Mobile Developer Conference',
            location: 'New York',
            startDate: new Date(currentYear, 7, 25),
            endDate: new Date(currentYear, 7, 26)
        },
        {
            id: 8,
            name: 'Android Developer Conference',
            location: 'Santa Clara, CA',
            startDate: new Date(currentYear, 11, 1),
            endDate: new Date(currentYear, 11, 4)
        },
        {
            id: 9,
            name: 'LA Tech Summit',
            location: 'Los Angeles, CA',
            startDate: new Date(currentYear, 10, 17),
            endDate: new Date(currentYear, 10, 17)
        }
    ]
});

});

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.