Eso del doctype está muy bien si quieres pasar el 3wc validator, pero si lo que de verdad quieres es que funcione tu código, mira estos cambios:
Código HTML:
Ver original <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Daniel",
"Mary",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"Berletzis",
"Xml",
"web",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ ); }
function extractLast( term ) {
return split( term ).pop();
}
function focusear(nodo){
nodo.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault(); } }).
autocomplete({ minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) ); },
focus: function() {
// prevent value inserted on focus
return false; },
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" ); this.value = terms.join( ", " );
return false; } });
}
$(function() {
$('#btnAdd').click(function() {
var num = $('.name').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('
<input type="text" class="text name" name="name" value="" />').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$('#name' + num).after(newElem);
// enable the "remove" button
$('#btnDel').removeAttr('disabled');
// business rule: you can only add 10 names
if (newNum == 10)
$('#btnAdd').attr('disabled','disabled');
focusear(newElem);
});
$('#btnDel').click(function() {
var num = $('.name').length; // how many "duplicatable" input fields we currently have
$('#name' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num == 2)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
focusear($("#name1"));
});
<div id="input1" style="margin-bottom:4px;" class="clonedInput"> Nombre:
<p class="ui-widget"><label for="name"> <input type="text" class="text name" name="name1" value="" id="name1" /></label> <input type="button" id="btnAdd" value="Agregar otro nombre" /> <input type="button" id="btnDel" value="Eliminar nombre" />
No eliminabas bien el atributo "disabled" de los elementos.
Al clonar los elementos, además de clonar los botones innecesariamente, también clonabas los métodos del "autocomplementar", que darán problemas (por ejemplo, el FOCUS siempre te manda al focus del primer elemento, ya que has clonado sus métodos y eventos). Lo que hay que hacer es convertir el input:text en un autocompletar cada vez que se cree. No solo al principio.
Y otros fallos menores como tener separado código en común en dos scripts diferentes con sus propios ámbitos.