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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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