Question

我正在尝试选择父元素.search-result-item并跳过其中的h3标记和选择中的btn-grey类。我的代码在这里

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

但它选择了h3和btn-grey也是我做错了什么？

我的HTML就在这里

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

Answer 1

试试这个。通过检查触发事件的元素来触发事件后的过滤：

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

Answer 2

你误解了发生的事情。将偶数绑定到父元素时，子元素上发生的所有事件都将冒泡到父元素并在父元素上触发事件。使用:not()不会改变这一事实。您需要测试事件处理程序中的event.target，以确保目标元素不您不想触发事件的元素之一。

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

选择元素的内容而不使用某些后代

2 个答案: