0

Пытаюсь повесить событие клик на селектор 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>

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

Скрин

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

7
  • Помочь можем, если вы покажите html в вашем вопросе. 25 мая 2018 в 7:12
  • html прикрепил , в браузере формируется так prntscr.com/jmda5m 25 мая 2018 в 7:21
  • Интересный вопрос, но где у вас svg в приведенном html? 25 мая 2018 в 7:38
  • вот prntscr.com/jmdntk , создаются после загрузки страницы 25 мая 2018 в 7:52
  • А svg не ajax-ом случайно грузиться на страницу?
    – Air
    25 мая 2018 в 8:07

2 ответа 2

1

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

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

12
  • как я понимаю стоит некий плагин который создает стили в виде звезд и html браузер рисует следующий prntscr.com/jmdmuz , то есть стили уже вырисовуются после загрузки страницы , как я понимаю 25 мая 2018 в 7:51
  • @ЕвгенийКолесник, Значит надо добавлять событие по onload. Поправил код.
    – Bharatha
    25 мая 2018 в 7:58
  • все равно не видит события , может событие нужно вешать на детей prntscr.com/jmdu6y 25 мая 2018 в 8:07
  • если вешаю событие на класс rainting_explain то все ок а если ниже то не работает prntscr.com/jmdujz , может можно на детей както повесить класса rainting_explain ? 25 мая 2018 в 8:08
  • 1
    @ЕвгенийКолесник, так я же вам уже дал ответ (смотрите изменённый код). И так однозначно должно работать.
    – Bharatha
    25 мая 2018 в 10:24
0

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

$( "svg" ).click(function() {
  console.log(this);
});
1
  • нет события кликаю prntscr.com/jmd7vb , я делал тестовый метод чтобы получать селекторы куда я кликаю то во всех местах отображается а именно на моих звездах пусто $('body').click(function (event) { console.log(event.target); }); 25 мая 2018 в 7:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.