Question

I’ve got several list items, when I click on the item I want the browser to redirect to “.title > a” link (href). But I don’t want any event on the “notThis” selector.

see the example
http://jsfiddle.net/VTGwV/29/

<div class="item">
<div class="title">
    <a href="www.jsfiddle.net">jsfiddle.net</a>     
</div>
<div> djføljdsaføljdsf a</div>
<div> djføljdsaføljdsf a</div>
<div> djføljdsaføljdsf a</div>
<div class="notThis">
    <a href="/test.html">link1 </a>
    <a href="/test2.html">link2</a>                
</div>

​

script

​$(document).on('click', '.item', function(event) {
    window.location.href = $(event.currentTarget).find('.title > a').attr('href');        
});​

I’ve tried :not(‘.notThis’) without any luck.

Changes
Thanks for all the answers, but I found another problem. If I have a event handler on the whole item , I can’t manage to click on the link in “notThis” selector, because it returns only “false”. Isn’t there a way to use .not / :not combined with $(document).on(‘click’, ——-)

Answer 1

You can test whether the click event originated from within the .notThis element (or the element itself):​

$(document).on('click', '.item', function(event) {
    if($(event.target).closest('.notThis').length > 0) {
        return false; // if you want to ignore the click completely
        // return; // else
    }
    window.location.href = $(event.currentTarget).find('.title > a').attr('href');
});​

I also think you can use this instead of event.currentTarget.