Uso Bootstrap Tags Input (con escritura anticipada) y funciona muy bien en mis entradas estáticas. Pero también creo campos de entrada dinámicos; estos no funcionarán.
¿Cómo puedo adjuntar un elemento creado dinámicamente a tagsinput?
Código principal:
var depends = ["jquery"]; var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches; matches = []; substrRegex = new RegExp(q, 'i'); $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var field = $('.resource_depend'); field.tagsinput({ confirmKeys: [13, 44], itemValue: 'id', typeaheadjs:({ hint: true, highlight: true, minLength: 1 }, { name: 'depends', source: substringMatcher(depends) }), maxTags: 20, maxChars: 50 });Más tarde tengo (algo así como):
... var cnt = 0; var addFragment = myStaticFragment.cloneNode(true); addFragment.id = 'dynamic_'+ cnt myStaticFragment.parentNode.appendChild(addFragment); cnt += 1;Nota: tengo varios campos independientes que usan etiquetas independientes.
Con las herramientas de desarrollo, parece agregar algo de código, pero no la funcionalidad como en las entradas estáticas.
ACTUALIZACIÓN: Traté de eliminar el atributo "rol de datos" de 'myStaticFragment' y llamar al código principal en cada adición. Simplemente duplicó el campo de entrada sin ninguna diferencia.
No he usado la biblioteca de escritura anticipada antes, por lo que esto se basa en mi experiencia con bibliotecas de interfaz de usuario de javascript similares. Si se parece a las bibliotecas KendoUI o jQueryUI, entonces debe agregar la funcionalidad DESPUÉS de que el elemento esté en el DOM.
Entonces, dado que usa bits de jQuery más arriba en javascipt, lo utilizaré.
Cambiando este bloque:
var cnt = 0; var addFragment = myStaticFragment.cloneNode(true); addFragment.id = 'dynamic_'+ cnt myStaticFragment.parentNode.appendChild(addFragment); cnt += 1;Para (por ejemplo):
var cnt = 0; var addFragment = $(myStaticFragment.cloneNode(true)).prop('id', 'dynamic_'+ cnt); var tagFragment = $(myStaticFragment).data().tagsInput(); //retrieve the functionality of the element myStaticFragment.parentNode.appendChild(addFragment); //add the fragment to the DOM addFragment.tagsInput(tagFragment); cnt += 1;Debería, teóricamente, al menos indicarle lo suficiente por los caminos correctos para poder descubrir la metodología exacta que requiere esta biblioteca en particular.
ACTUALIZACIÓN: para tener en cuenta las versiones anteriores de jQuery que no tienen la función .data() , una opción puede ser almacenar la configuración del elemento en una variable. Algo del estilo de:
var tagInputSettings = { confirmKeys: [13, 44], itemValue: 'id', typeaheadjs:({ hint: true, highlight: true, minLength: 1 }, { name: 'depends', source: substringMatcher(depends) }), maxTags: 20, maxChars: 50 }; var field = $('.resource_depend'); field.tagInput(tagInputSettings); ........................ var cnt = 0; var addFragment = $(myStaticFragment.cloneNode(true)).prop('id', 'dynamic_'+ cnt); myStaticFragment.parentNode.appendChild(addFragment); //add the fragment to the DOM addFragment.tagsInput(tagInputSettings); cnt += 1;¿Podría ser de utilidad?