Can this value be obtained?

Question

Can this value be obtained?

Navigation

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

1

Good day, I'm working with a calendar that is generated with Jquery then generates a table that brings a few years. I attach an image of how it looks:

The table is generated dynamically, creating this code:

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

With this function I want to bring that value, the alert does not show anything at the moment of the click:

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

But it does not bring it, I want to suppose that it is because the code is not in the document, but it is generated. Is there any way to bring that value? I'm using bootstrap-years-calendar

javascript jquery

asked by David Melo 13.04.2018 в 17:52

source

3 answers

Json does not bring all the results Problems uploading files in Laravel 5.5 project in a hosting

score 2 · Answer 1

Good day, related to your concern you could do something like the following:

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

Now the calendar plugin may be generating the table dynamically so it would play if it is doing so with a dynamic listener like the following:

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

The id "divContenedor" that I enunciate is to generate a search with more specific css selectors, because there may be other tables within the DOM, the idea is that you check if there is any element either span, div etc ... be container of your th or your table, depending on how long it takes to build your plugin the html in the DOM, it will be necessary to use a timeout to give the time required and when the query already exists the element, so I share a example of how you could do a timeOut:

$(function() {

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

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


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

});

I hope you find it useful, greetings.

score 1 · Answer 2

When Jquery adds an event, it practically writes the event on the found element, if at the moment in which you join the event the element does not yet exist, then it will not be coupled,

you must add the click function after the table was created.

If the table is recreated, that will also erase the event from your table.

score 0 · Answer 3

the library intercepts the events I leave you here with an example just place 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)
        }
    ]
});

});