web-dev-qa-db-fra.com

Comment obtenir le innerHTML de l'élément jquery sélectionnable?

J'ai une liste générée php dont les éléments de la liste sont sélectionnables à l'aide du widget jquery selectable. La liste à toutes fins utiles est:

<ul id="#select-image">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ul>

Et jQuery selectable est déclaré comme:

<script>
    $(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').innerHTML; 
                console.log($variable);
            }
        });
    });
</script>

Un événement se produit après la sélection d'un élément de la liste, dans l'exemple qu'il envoie à la console du navigateur. La sortie est cependant "non définie". Le sélecteur $('.ui-selected'). est correct car il apparaît en tant qu'objet dans la console du navigateur. Où vais-je mal?

javascriptjqueryhtmlinnerhtmlselectable
32
user2489311

Essayer 

.text () ou .html () au lieu de .innerHTML

48
Tushar Gupta

Utilisez .val() au lieu de .innerHTML pour obtenir la valeur de l'option sélectionnée

Utilisez .text() pour obtenir le texte de l'option sélectionnée

Merci d'avoir corrigé :)

3
Ganesh Pandhere
$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').html(); 
                console.log($variable);
            }
        });
    });

ou

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').text(); 
                console.log($variable);
            }
        });
    });

ou

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').val(); 
                console.log($variable);
            }
        });
    });
2
Sasidharan

Le paramètre ui a une propriété appelée selected qui est une référence à l'élément dom sélectionné, vous pouvez appeler innerHTML sur cet élément.

Votre code $('.ui-selected').innerHTML tente de renvoyer la propriété innerHTML d'un élément wrapper jQuery pour un élément dom de classe ui-selected

$(function () {
    $("#select-image").selectable({
        selected: function (event, ui) {
            var $variable = ui.selected.innerHTML; // or $(ui.selected).html()
            console.log($variable);
        }
    });
});

Démo: Fiddle

0
Arun P Johny