javascript - jQuery click event: check if element is within parent div - Stack Overflow

admin管理员组

文章数量:1336592

I'm trying to write a click function that checks if e.target is contained by a parent element. I've tried using .not() to exclude the element from another $(document).click function that is causing some un desired behavior, but that didn't work. I also tried using .contains(child,parent) but that doesn't work well because it requires the child element to not be a jQuery or JavaScript object. My case is plicated because there are several levels within my parent element and many more outside it.

Here is roughly what I want to do:

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

Here is my rendered 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="pany_name">Company Name</label>
                    <input class="form-control" id="pany_name" name="pany_name" type="text" value="{{jpany_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 mas 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="mit" type="submit" value="Send to My Friend(s)">
            </form>
        </div>
    </div>
</div>

I'm trying to write a click function that checks if e.target is contained by a parent element. I've tried using .not() to exclude the element from another $(document).click function that is causing some un desired behavior, but that didn't work. I also tried using .contains(child,parent) but that doesn't work well because it requires the child element to not be a jQuery or JavaScript object. My case is plicated because there are several levels within my parent element and many more outside it.

Here is roughly what I want to do:

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

Here is my rendered 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="pany_name">Company Name</label>
                    <input class="form-control" id="pany_name" name="pany_name" type="text" value="{{j.pany_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 mas 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="mit" type="submit" value="Send to My Friend(s)">
            </form>
        </div>
    </div>
</div>

• javascript
• jquery

Share Improve this question Follow edited Jul 13, 2015 at 22:56 Daniel Bonnell asked Jul 13, 2015 at 22:25 Daniel BonnellDaniel Bonnell 5,00799 gold badges5151 silver badges9292 bronze badges 5

• @squint I do think that he meant a different question. He asked if the target div is a child to any parent, and not if it is a parent to any children. Anyway, ACIDSTEALTH, you can use .parent(). Here's the API (api.jquery./parent). And I can tell you that every element will have a parent, except the html I guess. – Ted Commented Jul 13, 2015 at 22:29
• Use $.contains, but pass DOM elements instead. $.contains($('.dropdown-menu')[0], e.target) – user1106925 Commented Jul 13, 2015 at 22:29
• @Ted: Yeah, I reopened it a few seconds after closing it. – user1106925 Commented Jul 13, 2015 at 22:31
• 1 Or it seems you can do $(".dropdown-menu").has(e.target).length – user1106925 Commented Jul 13, 2015 at 22:33
• $('.dropdown-menu').has(e.target).length > 0 seems to work fine. I tried .has and .find and couldn't get them to work. – Daniel Bonnell Commented Jul 13, 2015 at 22:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use find

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

I think you can use $(e.target) or e.target, there is no difference.

You can use the parent function like this, since it will always be a child of something, you can check to see if it is or is not in the body tags:

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

Here is a working example: http://jsfiddle/5cjp47c7/

Or if you know what the parent class or id name is you can use this:

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

   // YES, the child element is inside the parent

} else {

   // NO, it is not inside

}

本文标签： javascriptjQuery click event check if element is within parent divStack Overflow