CODEWITHSUNDEEP
javascriptjquery
Muhammad Arif
Muhammad Arif

Reputation: 1022

Select an element's contents without certain descendants

I am trying to select the parent element .search-result-item and skip the h3 tag in it and btn-grey class from selection. my code is here 

$('div.search-result-item:not(h3 .btn-grey)').click(function(e){
    console.log('1');
});

but it selects h3 and btn-grey also what i doing wrong?

my HTML is here

<div data-id="52c53ccfaea0837f318b470c" class="search-result-item ">
        <div>
                <div class="search_result">
                        <div class="picture"><img width="195" height="130" src="/images/not_available.png" alt=""></div>
                        <div class="info">
                                <h3>
                                        <a href="/course-detail/masters/management-with-human-resource-management/full-time/university-of-chester-faculty-of-business-enterprise-and-lifelong-learning/uk/52c53ccfaea0837f318b470c" title="Management with Human Resource Management">
                                        Management with Human Resource Management                                                                       </a>
                                </h3>
                                <p>
                                        <strong>Entry Requirements: </strong>IELTS : 6.5
                                </p>
                                <a data-id="52c53ccfaea0837f318b470c" class="request-info" title="Request Info">
                                        <button class="btn btn-yellow">Request Info</button>
                                </a>
                                <a class="btn btn-grey" href="/course-detail/masters/management-with-human-resource-management/full-time/university-of-chester-faculty-of-business-enterprise-and-lifelong-learning/uk/52c53ccfaea0837f318b470c" title="Course Details">
                                        Course Details
                                </a>
                        </div> 
                </div><!-- .search_result -->    
        </div>
</div>

Upvotes: 0

Views: 54

Answers (2)

Richard Dalton
Richard Dalton

Reputation: 35803

Try this instead. Do the filtering after the event has fired by checking what element fired the event:

$('div.search-result-item').click(function(e){
    if (!$(e.target).is('h3,.btn-grey')) {
        console.log('1');
    }
});

Upvotes: 3

Kevin B
Kevin B

Reputation: 95058

You're misinterpreting what is going on. When you bind an even to a parent element, all events that happen on child elements will bubble to the parent and trigger the event on the parent. Using :not() will not change that fact. You instead need to test the event.target inside the event handler to ensure that the target element was not one of the elements that you didn't want to trigger the event.

$('div.search-result-item').click(function(e){
    if ( !$(e.target).is("h3,.btn-grey") ) {
        console.log('1');
    }    
});

Upvotes: 1

Related Questions