Я пытаюсь добавить прослушиватель событий ко всем элементам td
в моей таблице, что я и сделал, но функция запускается только один раз.
Мой JavaScript код для добавления события слушатель всех элементов td в моей таблице, кроме отключенных:
if(document.querySelector("#content > div > div.travel-calendar > div.datepicker.hasDatepicker.went-to-one")){
document.querySelectorAll("#content > div > div.travel-calendar > div.datepicker.hasDatepicker.went-to-one
> div.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-datepicker-multi.ui-datepicker-multi-2
> div.ui-datepicker-group.ui-datepicker-group-last > table > tbody > tr td:not(.ui-state-disabled)")
.forEach(e => e.addEventListener("click", function() {
setBookingData(e);
}));
}
Мой календарь HTML:
<div class="datepicker hasDatepicker went-to-one" id="dp1592287891314">
<a href="javascript:;" class="long-prev dp-pag-pop-up-link"></a><a href="javascript:;" class="long-next dp-pag-pop-up-link"></a>
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="display: block; width: 34em;">
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left">
<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title=""><span class="ui-icon ui-icon-circle-triangle-w"></span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">June</span> <span class="ui-datepicker-year">2020</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Sun</span></th>
<th><span title="Monday">Mon</span></th>
<th><span title="Tuesday">Tue</span></th>
<th><span title="Wednesday">Wed</span></th>
<th><span title="Thursday">Thu</span></th>
<th><span title="Friday">Fri</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sat</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">1</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">2</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">3</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">4</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">5</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">6</span></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">7</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">8</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">9</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">10</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">11</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">12</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">13</span></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">14</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail"><span class="ui-state-default">15</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 16-Jun-20 ui-datepicker-today"><span class="ui-state-default">16</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 17-Jun-20"><span class="ui-state-default">17</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 18-Jun-20"><span class="ui-state-default">18</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 19-Jun-20"><span class="ui-state-default">19</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail 20-Jun-20"><span class="ui-state-default">20</span></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail 21-Jun-20"><span class="ui-state-default">21</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 22-Jun-20"><span class="ui-state-default">22</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 23-Jun-20"><span class="ui-state-default">23</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 24-Jun-20"><span class="ui-state-default">24</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 25-Jun-20"><span class="ui-state-default">25</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 26-Jun-20"><span class="ui-state-default">26</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail 27-Jun-20"><span class="ui-state-default">27</span></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled unavail 28-Jun-20"><span class="ui-state-default">28</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 29-Jun-20"><span class="ui-state-default">29</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled unavail 30-Jun-20"><span class="ui-state-default">30</span></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right">
<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title=""><span class="ui-icon ui-icon-circle-triangle-e"></span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">July</span> <span class="ui-datepicker-year">2020</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Sun</span></th>
<th><span title="Monday">Mon</span></th>
<th><span title="Tuesday">Tue</span></th>
<th><span title="Wednesday">Wed</span></th>
<th><span title="Thursday">Thu</span></th>
<th><span title="Friday">Fri</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sat</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">1</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">2</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">3</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">4</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">5</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">6</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">7</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" date-range-selected ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">8</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">9</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">10</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">84</div>
</div>
</td>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">11</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">12</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">13</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">14</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">15</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">16</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">17</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">18</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">19</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">20</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">21</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">22</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">23</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">24</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">25</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">26</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">27</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">28</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">29</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">30</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" promos" data-handler="selectDay" data-event="click" data-month="6" data-year="2020">
<a class="ui-state-default" href="#">31</a>
<div class="lowest-rate-wrap">
<div class="lowest-rate">111</div>
</div>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-row-break"></div>
На изображении ниже показано, что код внутри функции прослушивателя событий выполняется только один раз: