jQuery - Dynamic Selector, je ne sais pas pourquoi il ne se déclenche pas

Question

Voici un exemple statique de déclenchement de l'événement scroll.
Il alerte le « sélecteur dynamique », le résultat d'alerte dans ce cas est la suivante:

#WordPanel #AZ-List div div div.ui-jqgrid-bdiv 

(C'est vrai son même que la ive sélectionnez statique tapé dans l'exemple ci-dessous)

$("#WordPanel #AZ-List div div div.ui-jqgrid-bdiv").scroll(function() { 
    alert("#"+$(".left .active").val()+"Panel #"+$("#"+$(".left .active").val()+" div ul li.CmdActive").html()+" div div div.ui-jqgrid-bdiv"); 
}); 

Je vais maintenant prendre le contenu de l'alerte(); et l'utiliser comme un sélecteur dynamique, comment jamais il ne se déclenche quand je défile les mêmes barres de défilement.
(S'il vous plaît noter, la valeur du sélecteur ci-dessous est exactement le même que celui statique utilisé dans l'exemple ci-dessus.)

$("#"+$(".left .active").val()+"Panel #"+$("#"+$(".left .active").val()+" div ul li.CmdActive").html()+" div div div.ui-jqgrid-bdiv").scroll(function() { 
    alert("Working"); 
}); 

..A peu plus de détails sur la façon dont tout cela fonctionne;
J'ai 2 divs côte à côte, Il y a une barre de navigation supérieure + boutons qui contrôle si la div gauche, ceux-ci contrôlent le contenu de la div gauche.
Par défaut, le premier sous-menu (rempli par le contenu de gauche (contrôlé par la barre de navigation supérieure)) est sélectionné. Cette sélection de sous-menu contrôle le contenu de la division droite (le contenu de droite est chargé via ajax)

Im utilisant .html (données); pour ajouter le contenu dans le bon div. Dans le contenu est jquery et code html.

Le problème de code ci-dessus est chargé à ce stade, lorsque le contenu divs droit est chargé.
Des exemples de choses que je dois correspondre avec un sélecteur (dynamiquement)

#WordPanel #JK-List div div div.ui-jqgrid-bdiv 
#WordPanel #AZ-List div div div.ui-jqgrid-bdiv 
#AccountPanel #Password div div div.ui-jqgrid-bdiv 
#AccountPanel #UserName div div div.ui-jqgrid-bdiv 

A ce stade, la question était, il choisirait le premier résultat par défaut et rien d'autre, dans ce cas, il égalerait:

#WordPanel #JK-List div div div.ui-jqgrid-bdiv 

et ne pas correspondre

#WordPanel #AZ-List div div div.ui-jqgrid-bdiv 

même une fois que j'ai # AZ-List comme résultat de correspondance (via le sélecteur d'alerte dans la console chromée) La solution que je vais probablement prendre à ce problème, aura une entrée cachée qui tiendra la valeur du texte du sous-menu (.html()), et en partant de là.

Answer 1

La seule chose que je peux penser, c'est que le contenu du sélecteur dynamique sont affectés par le défilement réel.

Essayez de mettre le sélecteur dans une variable et d'alerte avant de l'utiliser pour vous assurer qu'il est ce que vous voulez ..

var selector = "#"+$(".left .active").val()+"Panel #"+$("#"+$(".left .active").val()+" div ul li.CmdActive").html()+" div div div.ui-jqgrid-bdiv"; 
alert(selector); 
$(selector).scroll(function() { 
    alert("Working"); 
}); 

Est-ce que l'alerte au-dessus du sélecteur que vous voulez?

Answer 2

Je me demande s'il y a un caractère invisible qui n'apparaît pas dans l'alerte.

Essayez peut-être de rogner le texte que vous obtenez via .val() et .html().

var val = $.trim($(".left .active").val()); 
var html = $.trim($("#"+ val +" div ul li.CmdActive").html()); 

console.log(val, html); // check the console to verify the values 

$("#"+ val +"Panel #"+ html +" div div div.ui-jqgrid-bdiv").scroll(function() { 
    alert("Working"); 
}); 

je penserais que vous voulez mettre en cache la $(".left .active") de toute façon puisque vous l'appelez deux fois.

De même, dans votre sélecteur, vous avez un identifiant d'élément descendant d'un autre. Cela ne devrait pas être nécessaire puisque les identifiants doivent être uniques de toute façon. Il ne devrait pas être nécessaire de spécifier l'ancêtre de celui que vous voulez.

Alors:

#WordPanel #AZ-List div div div.ui-jqgrid-bdiv 

pourrait être:

#AZ-List div div div.ui-jqgrid-bdiv