JQuery не работает событие клик по SVG

178

09 июня 2018, 20:00

помогите решить проблему , пытаюсь повесить событие клик на селектор SVG но событие не срабатывает , не могу понять почему

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

перепробовал разные селекторы но ничего не помогает

Скрин

может кто подскажет куда копать ?

Answer 1

Вы вещаете событие на весь документ а не на свг. Попробуйте так:

$( "svg" ).click(function() {
  console.log(this);
});

Answer 2

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

Нажмите на синий квадрат.

Answer 3

Переделал рейтинг в нормальной верстке и все заработало, похоже ранее использовался плагин для формирование звезд