Ajout par programmation de curseurs d'interface utilisateur jQuery provoquant des problèmes

Question

J'ajoute actuellement une div à utiliser comme curseur par programmation, mais lorsque j'applique le curseur, tout apparaît mais je ne peux pas faire glisser la poignée ni aucun des états de survol fonctionne correctement.

var container = $('<div class="container"></div>'); 
var slider_div = $('<div class="position_slider"></div>'); 

$(slider_div).slider(); 

container.append(slider_div); 
$placeholder = $("#"+player_id); 
$placeholder.append(container); 

J'ai essayé tout nombre de combinaisons d'ajouter la div curseur sans résultat, et je me demande s'il y a quelque chose que je ne sais pas que je l'ai manqué. Ajouter physiquement un <div class="position_slider"> à la page permet au curseur de fonctionner, mais ce n'est pas une option.

Toute aide serait appréciée.

Answer 1

Le problème était de faire jquery.flash en modifiant le conteneur DIV après que le curseur ait été instancié. J'ai simplement changé l'ordre de construire le curseur, ajouter au conteneur, insérer le flash à construire curseur, insérer flash, append curseur. Si vous rencontrez des problèmes pour voir le curseur et tous les composants de l'interface utilisateur, mais que vous ne pouvez pas l'utiliser, supprimez simplement toutes les autres requêtes de la page, à l'exception de celles dont vous avez besoin pour accomplir le curseur. puis rajoutez-le tous en un par un jusqu'à ce que vous découvriez le gremlin.

Answer 2

Je pense que cela va éclaircir ce que cela devrait ressembler à:

var container = '<div class="container"></div>'; 
var slider_div = '<div class="position_slider"></div>'; 

$("#"+player_id).append(container); 
$(".container").append(slider_div); 
$(".position_slider").slider(); 

Je me rends compte que vous pouvez créer de nombreux curseurs par page, d'où l'accès programmatique, et que je changerais la classe références à des références d'ID et utiliser une sorte de compteur pour créer des ID incrémentiels pour les contrôles. Je vais laisser la mise en œuvre réelle comme un exercice pour vous.

Answer 3

Pour tous ceux qui ont trouvé cette page, j'ai rencontré un problème similaire.

Ceci produit un curseur qui semble correct mais qui ne fonctionne pas.

var mySlider = $("<div/>").slider(); 
$(mySlider).clone().appendTo(SomeDiv); 

Enregistrement du nouveau curseur avec slider() résolu le problème.

var mySlider = $("<div/>").slider(); 
$(mySlider).clone().slider().appendTo(SomeDiv);