javascript - jQuery - 親に何か子要素があるクリックイベントを許可しませんか?

Question

次のようなhtmlコードがあります。

<div class="pagination">
    <ul>
        <li class="prev"><span>&#8592;</span></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="next"><a href="javascript::void(0)">&#8594;</a></li> 
    </ul>
</div><!-- .pagination -->

liタグにクリックイベントを追加すると、 liタグをクリックしたいのですが、スパンの子要素がありません。つまり、クリックすると、クリックして何かをすることができます。どうすればいいですか？

Answer 1

:not()と:has()疑似セレクターを組み合わせてそれを行うことができます:

$('.pagination ul li:not(:has(span))').on('click', function() {
    // do stuff
});

フィドル

ただ行う方が簡単なようです：

$('.pagination ul li a').on('click', function(e) {
    e.preventDefault();
    // do stuff
});