3

clickイベントを素晴らしいフォントアイコンにバインドしたいと思います。ただし、アイコン自体はクリックできません。追加のテキストを挿入した場合にのみ、そのテキストがバインドされます。

アイコン自体をバインドするにはどうすればよいですか？

<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>
4

3 に答える 3

7

上で説明したように、スパンblockまたはinline-blockレイアウトを指定すると問題が修正されます。非標準フォントでこれが発生する理由については、完全にはわかりませんが、ブラウザが文字を認識しないため、spanタグが空であると想定し、幅が0に折りたたまれていることが原因である可能性があります。身長。

于 2012-09-10T17:18:06.127 に答える
2

これが私が使用した別の解決策であり、質問にもっと明確に答えるようで、アイコンだけをバインドし、他のテキストは必要ありません。spanIDを設定した場所にラップするだけです。次に例を示します。

<span id="menuOpen">
  <i class="fa fa-navicon"></i>
</span> 

 $("#menuOpen").click(showMenu);

それが誰かを助けることができることを願っています。

于 2017-09-14T18:26:11.083 に答える
0

別の解決策は、onClickをiタグに直接次のように書き込むことです。

<i class="fa fa-navicon" onClick="functionName()"></i>

はい、何時間もテストした後、上記の解決策で問題が解決しました。それがアイコンのすばらしい問題である可能性があることを私は知っています。検索すると、ここにたどり着きました。

于 2018-02-22T15:46:57.463 に答える