conflitto jquerymobile con completamento automatico: $ this.attr ( “href”) non è definita

StackOverflow https://stackoverflow.com/questions/4437419

Domanda

Quando uso jQuery UI autocomplete versione 1.8.5 con jQuery alpha mobile 2. Ottengo un errore quando si fa clic su un elemento dalla lista di completamento automatico:

  

$ this.attr ( "href") non è definito.

Qualcuno sa qualsiasi difficoltà per questo?

A CURA: 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css">
        <link rel="stylesheet" type="text/css" href="css/autocomplete.css">
    </head>
    <body>

        <div id="formWrap">
            <form id="messageForm" action="#">
                <fieldset>
                    <label id="toLabel">select:</label>
                    <div id="friends" class="ui-helper-clearfix">

                        <input id="to" type="text">
                    </div>

                </fieldset>
            </form>
        </div>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.0a2.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>


        <script type="text/javascript">
            $(function(){

                var availableTags = [
                        "ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ];


                //attach autocomplete
                $("#to").autocomplete({             

                    source:availableTags
                    ,

                    //define select handler
                    select: function(e, ui) {
                        var contact = ui.item.value;
                        createSpan(contact);
                        $("#to").val("").css("top", 2);
                        return false;
                    }           
                });

                });

            function createSpan(contact){
                //create formatted friend               
                span = $("<span>").text(contact)            
                //add contact to contact div
                span.insertBefore("#to");
            }
        </script>

    </body>
</html>
È stato utile?

Soluzione

Modificati jquery.mobile-1.0a2.js: Aggiunto un controllo per vedere se href è indefinito all'interno del codice 

  $( "a" ).live( "click", function(event) { 
           //( START: My added code) 
            if($(this).attr( "href" )==undefined){
                //for links created for interaction - ignore
                return false;
            }
           //( END: My added code) 
   //Remaining code follows

Questo risolto il problema.

Altri suggerimenti

Attenzione dolci, grazie per avermi nella giusta direzione.

trovo che sia meglio per ignorare il codice jQuery UI, piuttosto che modificare il codice sorgente cellulare jquery direttamente (per il bene di manutenibilità). Quanto segue sostituisce il metodo jquery-ui che rende ogni elemento nell'elenco completamento automatico; si aggiunge un attributo href con valore di '#' per l'elemento di ancoraggio in fase di creazione. Questo dovrebbe impedire l'errore href non definito: 

$('#to').data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( $( "<a></a>" ).attr({href: '#'}).html( item.label ) )
    .appendTo( ul );

}

$(this) non $this.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top