Plus onClick est empêché provoquant de nouveaux onclick ne pas fonctionner | Remplacer event.preventDefault()

Je travaille sur un script où les développeurs originaux ont peut-être ajouté un event.preventDefault() ou d'une façon ou empêché d'autres clics sur certains éléments de la table td. Leur clic fait une requête Ajax que je peux voir dans la console du navigateur mais mon nouveau gestionnaire onClick n'est jamais exécuté. J'aime ajouter un autre gestionnaire onclick où je montre un popup modal. Montrer le modal est facile Je ne suis pas sûr de la façon dont ils ont cessé d'ajouter d'autres clics sur l'élément.Plus onClick est empêché provoquant de nouveaux onclick ne pas fonctionner | Remplacer event.preventDefault()

je réellement tester le code avec le code suivant pour voir ce qui se passe et je peux voir que je reçois les alertes; Je pense que event.preventDefault() est utilisé. Comment puis-je forcer mon code à s'exécuter sur un événement click si d'autres clics ont été évités? Voici mon 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. 
    }); 
})();

La table ressemble à ceci;

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

Pour le td qui a 19, cela ne fonctionne pas lorsque j'ajoute un rappel onClick. Je ne peux en particulier pas lier onclick aux éléments avec la classe not_bookable.

Source

2017-10-17 LogicDev

donc appelle votre onmousedown. Supprimer preventDefault est une mauvaise idée. – epascarello

Merci c'était une bonne option. Je me demande s'il existe une autre façon de surmonter la prévention des clics supplémentaires. – LogicDev

Je ne suis pas sûr que vous serez en mesure d'atteindre cet objectif si vous ne pouvez pas supprimer le preventDefault d'origine. Qu'en est-il de l'utilisation d'un autre événement, comme mousedown? Ce n'est pas idéal, mais ...

Source

2017-10-17 21:06:40

Plus onClick est empêché provoquant de nouveaux onclick ne pas fonctionner | Remplacer event.preventDefault()

Répondre

Questions connexes