jquery mobile conflicto con autocompletar: $ this.attr ( “href”) no está definido

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

Pregunta

Cuando uso jquery ui autocompletar versión 1.8.5 con jquery alfa móvil 2. Me aparece un error al hacer clic en un elemento de la lista de autocompletar:

$ this.attr ( "href") no está definido.

¿Alguien sabe alguna solución para esto?

Editado: 

<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>
¿Fue útil?

Solución

Modificados jquery.mobile-1.0a2.js: Se ha añadido una comprobación para ver si href no está definido dentro del código 

  $( "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

Esto ha solucionado el problema.

Otros consejos

Hey dulces, gracias por apuntando en la dirección correcta.

Me parece que es mejor para anular el código de jQuery UI en lugar de modificar el código fuente móvil jQuery directamente (por el bien de la capacidad de mantenimiento). El siguiente reemplaza el método jquery-ui que hace que cada elemento de la lista de autocompletar; se añade un atributo href con el valor de '#' para el elemento de anclaje está creando. Esto debe evitar que el error no definido href: 

$('#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) no $this.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top