jquery detect ::after css selector click event

Question

i have a css class with a ::after selector , and when a user click on the element that have this class i want to show an alert. but i don't know why its not working .
this is my code :

css :

.flatpickr-time.time24hr :first-child:after {
    content: 'Valider';
    background: #BB0A30;
    font-family: 'audditype-bold';
    font-size: 15px;
    color: white;
    padding: 8px 50px 8px 50px;
    left: 28px;
    position: absolute;
    top: 60px;
}

js:

$('.flatpickr-time.time24hr :first-child:after').click(function(){


alert('hello test')


});

so the purpose here is to show an alert when clicking on the content 'valider'

score 0 · Answer 1 · answered May 05 '21 at 15:53

It's a little messy, but this can be achieved by checking where the pointer was when the click event occurred.

If the pointer is outside the bounds of the control then we assume it was the ':after' psuedoelement that was clicked.

Here's a snippet that shows this working:

$('.flatpickr-time.time24hr :first-child').click(function(e) {
  let ctl = $('.flatpickr-time.time24hr :first-child');
  
  if (e.offsetX > ctl.width() || e.offsetY > ctl.height()) {
    console.log('test');
  }
});

.flatpickr-time.time24hr :first-child:after {
    content: 'Valider';
    background: #BB0A30;
    font-family: 'audditype-bold';
    font-size: 15px;
    color: white;
    padding: 8px 50px 8px 50px;
    left: 28px;
    position: absolute;
    top: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flatpickr-time time24hr">
    <a href="#">Test</a>
</div>

Note: This will only work if the :after pseudo element does actually occur further to the right, or lower, than the primary element. If it occurs before it then it will not work.

Second note: This will also work for :before pseudo elements. It's not restricted to :after only, which may or may not be desirable.

jquery detect ::after css selector click event

1 Answers1