Событие jQuery click: проверьте, находится ли элемент в родительском div

Question

Я пытаюсь написать функцию click, которая проверяет, содержит ли e.target родительский элемент. Я пробовал использовать .not(), чтобы исключить элемент из другой функции $(document).click, вызывающий некоторое нежелательное поведение, но это не сработало. Я также попытался использовать .contains(child,parent), но это не сработает, потому что для дочернего элемента не нужен объект jQuery или JavaScript. Мой случай сложный, потому что в моем родительском элементе есть несколько уровней и много других вне его.

Вот примерно то, что я хочу сделать:

$(document).click(function(e) { 
    if($.contains($('.dropdown-menu'),$(e.target)) { 
     e.stopPropagation(); 
    } else { 
     $('.dropdown-menu').hide(); 
    } 
}); 

Вот мой визуализации HTML:

<div class="dropdown"> 
    <button class="j-descrip-button thin job-dropdown-link" menu="refer">Refer A Friend</button> 
    <div class="dropdown-menu right refer-menu" style="display:none;"> 
     <div class="dd_arrow"> 
     </div> 
     <div class="refer-dropdown-content"> 
      <form accept-charset="UTF-8" action="/send_refer_a_friend_email" html="{:role=>&quot;form&quot;}" method="post" class="ng-pristine ng-valid"> 
       <div style="margin:0;padding:0;display:inline"> 
        <input name="utf8" type="hidden" value="✓"> 
        <input name="authenticity_token" type="hidden" value="{{authenticity_token}}"> 
       </div> 
       <div class="form-group" style="display: none;"> 
        <label for="company_name">Company Name</label> 
        <input class="form-control" id="company_name" name="company_name" type="text" value="{{j.company_name}}"> 
       </div> 
       <div class="form-group" style="display:none;"> 
        <label for="job_title">Job Title</label> 
        <input id="job_title" name="job_title" value="Python Developer" type="text" class="form-control"> 
       </div> 
       <div style="font-size: 20px; margin-bottom: 10px;"> 
        <b>You're an awesome friend!</b> 
       </div> 
       <div class="form-group"> 
        <label for="user_full_name">Your Name</label> <!-- is this the best way to do this? --> 
        <div> 
         <input class="refer-text-field" id="user_full_name" name="user_full_name" type="text" value="{{current_user_name}}"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <span> 
         <label for="friend_email">Your Friend's Email</label> 
         <em style="font-size: 10px;">use commas for multiple emails</em> 
        </span> 
        <div> 
         <input class="refer-text-field" id="friend_email" name="friend_email" type="text"> 
        </div> 
       </div> 
       <div class="prof-link" style="display: none;"> 
        <label for="prof_link">Profile Link</label> 
        <input class="form-control" id="prof_link" name="prof_link" type="text" value="{{profile_link}}"> 
       </div> 
       <input class="refer-submit-btn" name="commit" type="submit" value="Send to My Friend(s)"> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 1

Вы можете использовать родительскую функцию, как это, так как он всегда будет ребенком чего-то, вы можете проверить, чтобы увидеть, если он есть, или не в тегах тела:

$('button').click(function(){ 
    var x = $(this).parent(); 
    if (!x.is('body')) { 
     console.log("It has it!"); 
    } else { 
     console.log("It does not have it!"); 
    } 
}); 

Вот рабочий пример: http://jsfiddle.net/5cjp47c7/

или, если вы знаете, что родительский класс или имя идентификатора вы можете использовать это:

if ($(".child-element").parents("#main-nav").length == 1) { 

    // YES, the child element is inside the parent 

} else { 

    // NO, it is not inside 

} 

Answer 2

Использование find

$(document).click(function(e) { 
    if($('.dropdown-menu').find($(e.target))) { 
     e.stopPropagation(); 
    } else { 
     $('.dropdown-menu').hide(); 
    } 
}); 

Я думаю, что вы можете использовать $(e.target) или e.target , нет никакой разницы.