进一步防止onClick导致新的onclick无法正常工作| 覆盖event.preventDefault（）

Question

I am working on a script where the original developers may have added a event.preventDefault() or some how prevented any further clicks on certain table td elements. Their click makes an Ajax request which I can see in the browser console but my new onClick handler is never executed. I do like to add another onclick handler where I show a modal popup. Showing the modal is easy I am just not sure how they stopped adding further onclick handling on the element.

I have actually test the code with the following code to see what happens and I can see than I get the alerts;

Event.prototype.stopPropagation = function(){ alert('stopPropagation') }
Event.prototype.preventDefault = function(e){ console.log (e); alert('preventDefault') }

So I am thinking event.preventDefault() is being used. How can I force my code to execute on a click event if further clicks have been prevented. Here is my code;

(function (){
    Event.prototype.stopPropagation = function(){ alert('stopPropagation') }
    Event.prototype.preventDefault = function(e){ console.log (e); alert('preventDefault') }
    jQuery('body').on('click', 'td.bookable', function (e){
       console.log ("Clickable!"); //This is not logged.
        //I want to add my show modal popup here.
    });
})();

The table looks like this;

<table class="ui-datepicker-calendar">
   <thead>
      <tr>
         <th scope="col"><span title="Monday">M</span></th>
         <th scope="col"><span title="Tuesday">T</span></th>
         <th scope="col"><span title="Wednesday">W</span></th>
         <th scope="col"><span title="Thursday">T</span></th>
         <th scope="col"><span title="Friday">F</span></th>
         <th scope="col" class="ui-datepicker-week-end"><span title="Saturday">S</span></th>
         <th scope="col" class="ui-datepicker-week-end"><span title="Sunday">S</span></th>
      </tr>
   </thead>
   <tbody>
      ...
      <tr>
         <td class=" ui-datepicker-unselectable ui-state-disabled bookable" title="This date is available"><span class="ui-state-default">9</span></td>
         <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">10</span></td>
         <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">11</span></td>
         <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">12</span></td>
         <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">13</span></td>
         <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">14</span></td>
         <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">15</span></td>
      </tr>
      <tr>
         <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">16</span></td>
         <td class=" ui-datepicker-unselectable ui-state-disabled bookable ui-datepicker-today" title="This date is available"><span class="ui-state-default">17</span></td>
         <td class=" ui-datepicker-unselectable ui-state-disabled bookable" title="This date is available"><span class="ui-state-default">18</span></td>
         <td class=" bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">19</a></td>
         <td class=" bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">20</a></td>
         <td class=" ui-datepicker-week-end bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">21</a></td>
         <td class=" ui-datepicker-week-end bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">22</a></td>
      </tr>
      ...
   </tbody>
</table>

For the td that has 19 it does not work when I add an onClick callback. I particularly cannot bind onclick to elements with the not_bookable class.

Answer 1

I'm not sure you'll be able to achieve this if you can't remove the original preventDefault. What about using another event, like mousedown? I'ts not ideal, but...