CODEWITHSUNDEEP
javascriptjquery
Killer Whale
Killer Whale

Reputation: 87

jQuery - Don't allow click event with parent has something children element?

I have a html code like this:

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

When I add click event for li tag, I want to click li tag don't have span children element.It means that if I click on it, do nothing but other I can click and do something. How can I do it?

Upvotes: 0

Views: 936

Answers (1)

adeneo
adeneo

Reputation: 318182

You can combine the :not() and :has() pseudo selectors to do that :

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

FIDDLE

It does seem easier to just do :

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

Upvotes: 2

Related Questions