Добавление прослушивателя событий к каждому узлу элемента при триггерах по первому щелчку - PullRequest
0 голосов
/ 16 июня 2020

Я пытаюсь добавить прослушиватель событий ко всем элементам 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>&nbsp;<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">&nbsp;</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">&nbsp;</td>
              <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
              <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
              <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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>&nbsp;<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">&nbsp;</td>
              <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
              <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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">&nbsp;</td>
           </tr>
        </tbody>
     </table>
  </div>
  <div class="ui-datepicker-row-break"></div>

На изображении ниже показано, что код внутри функции прослушивателя событий выполняется только один раз:

Image proving code inside the event listener's function is executed only for the first click

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...