Les écouteurs d'événement jQuery ne fonctionnent que dans la console

J'ai un problème étrange où je définis un ensemble d'écouteurs d'événement dans un document.ready ou un window.load et rien ne se passe quand je charge la page et essaye de déclencher une d'eux.

J'ai d'abord pensé que cela pourrait être un problème de DOM, cependant si je console.log() chaque élément auquel je lie un écouteur, il est enregistré avec succès, m'indiquant que ce n'est pas un problème avec le DOM. Si je lie les auditeurs à d'autres éléments sur ma page, ceux-ci semblent fonctionner correctement. Si je copie simplement/coller le code ci-dessous dans la console, tout fonctionne bien.

J'ai également essayé de ne pas les placer dans une fonction document.ready ou window.load , mais cela ne fait aucune différence. J'ai essayé d'ajuster l'emplacement du script. Je l'ai placé dans la tête, le pied de page et dans un fichier séparé à charger via le pipeline d'actifs dans Rails. Encore une fois, cela ne fait aucune différence.

Il n'y a aucun autre écouteur lié à ces éléments n'importe où dans mon code. Qu'est-ce que j'oublie ici?

$(document).ready(function() {
   //This console.log() statement returns the correct DOM element
    console.log($('#direct-apply-btn'));

   //As does this one:
    console.log($('[data-toggle="popover-filter"]'));

    var popoverTextFilter = "Some text here.";
    var popoverTextButton = "Some other text here.";

    $('[data-toggle="popover-filter"]').popover({
        delay: {show: "500", hide: "100"},
        content: popoverTextFilter,
        trigger: "hover",
        placement: "top"
    });

    $('[data-toggle="popover-btn"]').popover({
        delay: {show: "500", hide: "100"},
        content: popoverTextButton,
        trigger: "hover",
        placement: "top"
    });

    if(location.hash.includes('direct_apply')) {
        $('.direct-apply-filter').addClass('direct-apply-btn-active');
        $('.direct-apply-text').addClass('direct-apply-btn-active');
    }

    $('#direct-apply-btn').click(function() {
        $('.direct-apply-filter').toggleClass('direct-apply-btn-active');
        $('.direct-apply-text').toggleClass('direct-apply-btn-active');
    });

    $('.clear-filters-btn').click(function(){
        $('.direct-apply-filter').removeClass('direct-apply-btn-active');
        $('.direct-apply-text').removeClass('direct-apply-btn-active');
    });
   //This listener works fine.    
    $('.header').click(function(){
        $(this).css('background','red');
    });
});

MISE À JOUR

Je suis venu avec un hack qui déclenche les auditeurs de l'événement. C'est un peu bogué, mais c'est mieux que rien. Voir le code ci-dessous. J'espère toujours savoir pourquoi $ (document) .ready ou $ (window) .load ne fonctionnerait pas pour moi. Le code ci-dessous semble déclencher tous les écouteurs d'événement, mais ce n'est pas une solution à long terme pour mon application et cela ne fonctionne pas sur mobile.

$(document).scroll(function(){
    directApplyEventListeners();
});

function directApplyEventListeners() {
    var popoverTextFilter = "Some text here.";
    var popoverTextButton = "Some other text here.";

    dataToggles();

    $('.search-results').bindWithDelay('DOMSubtreeModified', function() {
        dataToggles();
    });

    function dataToggles() {
        $('[data-toggle="popover-filter"]').popover({
            delay: {show: "500", hide: "100"},
            content: popoverTextFilter,
            trigger: "hover",
            placement: "top"
        });

        $('[data-toggle="popover-btn"]').popover({
            delay: {show: "500", hide: "100"},
            content: popoverTextButton,
            trigger: "hover",
            placement: "top"
        });
    };

    if(location.hash.includes('direct_apply')) {
        $('.direct-apply-filter').addClass('direct-apply-btn-active');
        $('.direct-apply-text').addClass('direct-apply-btn-active');
    }

    $('#direct-apply-btn').click(function() {
        $('.direct-apply-filter').toggleClass('direct-apply-btn-active');
        $('.direct-apply-text').toggleClass('direct-apply-btn-active');
    });

    $('.clear-filters-btn').click(function(){
        $('.direct-apply-filter').removeClass('direct-apply-btn-active');
        $('.direct-apply-text').removeClass('direct-apply-btn-active');
    });
};

UPDATE 2 Here is the rendered portion of the DOM that the event listeners should be bound to:

<div class="filters ng-scope full-dna-search" ng-class="{'full-dna-search':fullDnaSearch}" ng-controller="FiltersCtrl">
    <div class="filter-container r1">
        <div class="filter-label basic-search">Basic Search</div>

        <div class="dropdown ng-isolate-scope" dropdown="" name="cityDropdown.name" items="cityDropdown.items" category="cityDropdown.category">
            <div class="filter-button" ng-click="toggleMenu()">
                City
            </div>
            <div class="dd_arrow filter ng-hide" ng-show="menuVisible"></div>
            <div class="dropdown-directive-menu ng-hide" ng-show="menuVisible">
                Clear all
                <form name="dropdown_form" class="ng-pristine ng-valid">

                </form>
            </div>
        </div>

        <div class="dropdown ng-isolate-scope" dropdown="" name="industryDropdown.name" items="industryDropdown.items" category="industryDropdown.category">
            <div class="filter-button" ng-click="toggleMenu()">
                Industry
            </div>
            <div class="dd_arrow filter ng-hide" ng-show="menuVisible"></div>
            <div class="dropdown-directive-menu ng-hide" ng-show="menuVisible">
                Clear all
                <form name="dropdown_form" class="ng-pristine ng-valid">
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Financial
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Marketing
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Technology
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="dropdown ng-isolate-scope" dropdown="" name="sizeDropdown.name" items="sizeDropdown.items" category="sizeDropdown.category">
            <div class="filter-button" ng-click="toggleMenu()">
                Size
            </div>
            <div class="dd_arrow filter ng-hide" ng-show="menuVisible"></div>
            <div class="dropdown-directive-menu ng-hide" ng-show="menuVisible">
                Clear all
                <form name="dropdown_form" class="ng-pristine ng-valid">
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            1-10 Employees
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="dropdown ng-isolate-scope" dropdown="" name="jfuncDropdown.name" items="jfuncDropdown.items" category="jfuncDropdown.category">
            <div class="filter-button" ng-click="toggleMenu()">
                Job Function
            </div>
            <div class="dd_arrow filter ng-hide" ng-show="menuVisible"></div>
            <div class="dropdown-directive-menu ng-hide" ng-show="menuVisible">
                Clear all
                <form name="dropdown_form" class="ng-pristine ng-valid">
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Customer Support
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Engineering
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            IT
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Management
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                        <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleItem($index); $event.stopPropagation();">
                            <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid">
                            Marketing
                        </div>
                    </div>
                    <div ng-repeat="i in items" class="ng-scope">
                 
0

1 Réponses

Selon ma compréhension du problème, votre problème concerne les commentaires Javscript.

Les commentaires Javascript ne commencent pas par "#" mais commencent par "//" pour les commentaires sur une seule ligne et/**/pour les commentaires multilignes.

$(document).ready(function() {
   //This console.log() statement returns the correct DOM element
    console.log($('#direct-apply-btn'));

   //As does this one:
    console.log($('[data-toggle="popover-filter"]'));

    var popoverTextFilter = "Some text here.";
    var popoverTextButton = "Some other text here.";

    $('[data-toggle="popover-filter"]').popover({
        delay: {show: "500", hide: "100"},
        content: popoverTextFilter,
        trigger: "hover",
        placement: "top"
    });

    $('[data-toggle="popover-btn"]').popover({
        delay: {show: "500", hide: "100"},
        content: popoverTextButton,
        trigger: "hover",
        placement: "top"
    });

    if(location.hash.includes('direct_apply')) {
        $('.direct-apply-filter').addClass('direct-apply-btn-active');
        $('.direct-apply-text').addClass('direct-apply-btn-active');
    }

    $('#direct-apply-btn').click(function() {
        $('.direct-apply-filter').toggleClass('direct-apply-btn-active');
        $('.direct-apply-text').toggleClass('direct-apply-btn-active');
    });

    $('.clear-filters-btn').click(function(){
        $('.direct-apply-filter').removeClass('direct-apply-btn-active');
        $('.direct-apply-text').removeClass('direct-apply-btn-active');
    });

    $('.header').click(function(){
        $(this).css('background','red');
    });
});
0
ajouté
regarde ce violon. les journaux de la console fonctionnent jsfiddle.net/ylokesh/amur2abs
ajouté l'auteur Lokesh Yadav, source
Je viens de mettre ces commentaires là quand j'écrivais le poste. Ils ne sont pas dans mon code actuel. Merci d'avoir attrapé ça.
ajouté l'auteur ACIDSTEALTH, source
Comment cela aide-t-il à résoudre mon problème?
ajouté l'auteur ACIDSTEALTH, source