help solve the problem, try to hang the event click on the SVG selector but the event does not work, I can not understand why

$(document).on("click", 'svg', function(e) { console.log(this); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="all_explain"> <div class="mini_explain"><img src="/images/8.png" alt=""><strong>Рейтинг:</strong> <span class="rainting_explain"> <i class="fas fa-star" data-id='fas' id="fas_1"></i> <i class="fas fa-star" data-id='fas' id="fas_2"></i> <i class="fas fa-star" data-id='fas' id="fas_3"></i> <i class="fas fa-star" data-id='fas' id="fas_4"></i> <i class="fas fa-star" data-id='fas' id="fas_5"></i> </span> <div class="thank_you_rating" style="display: none">Спасибо, мы приняли ваш рейтинг!</div> </div>

tried different selectors but nothing helps

Screen

can someone tell me where to dig?

  • We can help if you show html in your question. - Stepan Kasyanenko
  • html attached, in the browser is formed so prntscr.com/jmda5m - Eugene Kolesnik
  • An interesting question, but where is your svg in the above html? - Sergey Glazirin
  • here prntscr.com/jmdntk , created after the page loads - Eugene Kolesnik
  • svg n't svg ajax-ом accidentally loaded onto a page? - Air

3 answers 3

You are broadcasting an event to the whole document and not to the SWG. Try this:

 $( "svg" ).click(function() { console.log(this); });
  • no event click prntscr.com/jmd7vb , I did a test method to get selectors where I click something in all places is displayed on my stars is empty $ ('body'). click (function (event) {console.log (event. target);}); - Evgeny Kolesnik

 $(document).ready(function() { $(document).on('click', '.rainting_explain', function(e) { var svg = e.target.parentNode; if(svg.nodeName.toUpperCase() == 'SVG') console.log('нажато svg с id = ' + svg.id); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="rainting_explain"><svg id="fas_1"><rect width="30" height="30" fill="#00c"/></svg></span>

Click on the blue square.

  • As I understand it, there is a certain plugin that creates styles in the form of stars and the html browser draws the following prntscr.com/jmdmuz , that is, the styles will already appear after the page loads, as I understand it - Eugene Kolesnik
  • @ EugeneKolesnik, So you need to add an event on onload. Corrected the code. - Bharata
  • still does not see the event, maybe the event should be hung up on children prntscr.com/jmdu6y - Evgeny Kolesnik
  • if I hang an event on the rainting_explain class, then everything is ok, but if prntscr.com/jmdujz doesn’t work below, can it be possible for children to hang up the rainting_explain class? - Evgeny Kolesnik
  • one
    @ EvgenyKolesnik, I already gave you the answer (see the modified code). And so it should definitely work. - Bharata

Redid the rating in normal layout and it all worked, it seems that the plugin for star formation was used previously