Я хочу привязать событие click к значку шрифта awesome. Тем не менее, сам значок не активен, только когда я вставляю дополнительный текст, этот текст становится связанным.
Как привязать саму иконку?
<span class="icon-star">
only this text is clickable, the icon itself is not
</span>
<script type="text/javascript">
(function($) {
$('span.icon-star').on('click', function() {
console.log($(this));
});
})(jQuery);
</script>
Как обсуждалось выше, задание для диапазона макета block или inline-block решит проблему. Что касается того, почему это происходит с нестандартными шрифтами, я не совсем уверен, но это может быть связано с тем, что браузер не распознает символ и поэтому предполагает, что тег span пуст, таким образом сворачивая его до 0 ширины и высота.
Вот еще одно решение, которое я использовал, которое, кажется, более четко отвечает на вопрос, привязывая только значок, никакой другой текст не требуется. Просто оберните его в span, где вы установили идентификатор. Вот пример:
<span id="menuOpen">
<i class="fa fa-navicon"></i>
</span>
$("#menuOpen").click(showMenu);
Надеюсь, что это может помочь кому-то.
Другим решением является запись onClick непосредственно в теге i следующим образом:
<i class="fa fa-navicon" onClick="functionName()"></i>
Да, после многочасового тестирования вышеприведенное решение помогло, и тогда я знаю, что это может быть отличная проблема со значком, и поиск привел меня сюда.
display:blockилиdisplay:inline-block) - person chrisfrancis27 schedule 10.09.2012.icon-starэлементы, которые являются дочерними элементами спанов, тогда как я думаю, что вам нужноspan.icon-star. - person chrisfrancis27 schedule 10.09.2012