jquery mobile conflicto con autocompletar: $ this.attr ( “href”) no está definido
-
09-10-2019 - |
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>
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
.