J'essaye d'écrire une fonction click qui vérifie si e.target est contenu par un élément parent. J'ai essayé d'utiliser .not() pour exclure l'élément d'une autre fonction $(document).click qui provoque un comportement indésirable, mais cela n'a pas fonctionné. J'ai également essayé d'utiliser .contains(child,parent) mais cela ne fonctionne pas bien car cela nécessite que l'élément enfant ne soit pas un objet jQuery ou JavaScript. Mon cas est compliqué car il y a plusieurs niveaux dans mon élément parent et bien d'autres en dehors.

Voici à peu près ce que je veux faire:

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

Voici mon HTML rendu:

<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>
3
Daniel Bonnell 14 juil. 2015 à 01:25

2 réponses

Meilleure réponse

Vous pouvez utiliser la fonction parent comme ceci, car ce sera toujours un enfant de quelque chose, vous pouvez vérifier si elle est ou non dans les balises body:

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

Voici un exemple de travail: http://jsfiddle.net/5cjp47c7/

Ou si vous connaissez la classe parent ou le nom de l'ID, vous pouvez utiliser ceci:

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

   // YES, the child element is inside the parent

} else {

   // NO, it is not inside

}
2
Zach 13 juil. 2015 à 22:46

Utilisez find

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

Je pense que vous pouvez utiliser $(e.target) ou e.target, il n'y a aucune différence.

3
jperelli 13 juil. 2015 à 22:38