Cuidado con las comillas en javascript

[eloyucu]

No sé si alguna vez habéis tenido este problema que os voy a presentar, pero a mi me ha estado dando la vara un rato largo. Voy a dar por hecho que todos sabemos como intercalar comillas a nivel básico, o sea (por ejemplo), si tengo que poner con javascript un div cuya clase quiero que sea operarios, haría esto:

Código Javascript:

$(this).append("<div class='operarios'");
 

Entonces, quizá os preguntéis: ¿cuál ha sido el problema que has tenido para haber estado casi una hora con esto?
La repuesta es mejor que la explique con un ejemplo, justamente en el que estaba trabajando. Pongo el código y después lo explico:

Código Javascript:

$(".contenedor_operarios").append("<div class='operarios' style='top: "+ (150+(indice*60)) +"px' onclick='initGeneral("+operarios_nombre[operarios_nombre.length-1]+");'></div>"
 

Estoy añadiendo un div a otro div contendedor, y quiero que este div hijo llame a la función initGeneral... y la variable tiene que ser un string, de este modo, si al introducir datos en el array se hace de la siguiente manera:

Código Javascript:

operarios_nombre[operarios_nombre.length] = nombre;
 

Parece que todo funciona... pero al clicar sobre el elemento la consola de errores de javascript escupe el siguiente error: Test in not defined. Donde Test era el nombre introducido en el array y que el evento onclick está pasando a la función... el problema es que se lo envía así Test, en crudo, en lugar de enviarle "Test". Evidentemente si definimos la variable Test en el javascript, dejaría de generar el error, pero seguiría sin funcionar evidentemente.
En el array con el que trabajo tengo unos cuantos nombres y no me acordaba que ese era uno de ellos, y daba la casualidad que siempre clicaba sobre el mismo div, además, al tener ese nombre tan expresivo pensé que podría ser una variable del sistema extraña que se había colado, o algo así.
La primera solución, al darme cuenta que Test era el nombre del array, que se me ocurrió fue poner comillas intercaladas:

Código Javascript:

$(".contenedor_operarios").append("<div class='operarios' style='top: "+ (150+(indice*60)) +"px' onclick='initGeneral('"+operarios_nombre[operarios_nombre.length-1]+"');'></div>"
 

Si so fijáis hay unas comillas simples antes de las dobles comillas al inicio del paso del parámetro de la función y al final. Aquí: ral('"+op y aquí th-1]+"');. Pero evidentemente al renderizar el javascript en html la solución no era la esperada:

Código HTML:

<div class="operarios" style="top: 270px" onclick="initGeneral("test_2");"></div>
 

A lo que al hacer clic el error era que faltaba un token } (o algo así)... Pero el tema es que la llamada a la función estaba incompleta, se estaba llamando a initGeneral(
Finalmente la solución fue jodidam.... digo, extremadamente simple. Al tiempo de introducir las variables en el array les puse directamente las comillas tal que así:

Código Javascript:

operarios_nombre[operarios_nombre.length] = '"' + nombre + '"';
 

Lo que no he testeado, es si esto funcionaría:

Código Javascript:

operarios_nombre[operarios_nombre.length] = "'" + nombre + "'";
 

Es similar, pero tiene las comillas intercaladas. En la primera forma coincidiría con el intercalado de comillas de la función append, y sobre todo de la asociación de la función initGeneral al evento onclick.
Otra cosa que me queda por saber es si existe alguna forma de "escapar" las comillas, o sea, algún caracter de escape, que presuponiendo hipotéticamente que pudiera ser el caracter /, el método append quedaría:

Código Javascript:

$(".contenedor_operarios").append("<div class='operarios' style='top: "+ (150+(indice*60)) +"px' onclick='initGeneral(/""+operarios_nombre[operarios_nombre.length-1]+"/");'></div>"
 

Bueno... espero que a alguien le ayude. Y a ver si alguien confirma esas dos pequeñas dudas (la del segundo método de introducción de nombres en el array con las comillas intercambiadas, y la de si existe algún tipo de carácter de escape).

MUCHAS GRACIAS.

[Italico76]

Escapas con barra (\), pero no puedes escapar variables como en PHP por ejemplo

Código Javascript:

document.write('Hablaremos sobre el lenguaje de marcado \'HTML\' <br/>');
 

[PHPeros]

En JavaScript al igual que otros lenguajes existe el escape mediante backslash \'.

[Italico76]

Iniciado por PHPeros

En JavaScript al igual que otros lenguajes existe el escape mediante backslash \'.

Si pero funciona distino...lamentablemente el uso de la barra no es general, asi no puedes escapar tags mediante el uso de la barra sino que se vale del ampersand (&) para > y < etc

[rjulio21]

has probado escapar las comillas con backslash?
Las comillas generales del html las escapas con backslash y solo deja simples las del parametro de la funcion initGeneral.

Código Javascript:

$(".contenedor_operarios").append("<div class=\"operarios\" style=\"top: "+ (150+(indice*60)) +"px\" onclick=\"initGeneral('"+operarios_nombre[operarios_nombre.length-1]+"'\");\"></div>"
 

En javascript funciona asi pues yo lo he usado.

[Triby]

Si estás usando jquery, no veo la necesidad de concatenar todo eso en una línea; siendo tan fácil:

1- Creas un nuevo elemento y asignas id, estilos, onclick, hasta contenido html
2- Lo agregas al contenedor

Revisa la primera respuesta en: http://stackoverflow.com/questions/1...ment-in-jquery

[Alexis88]

Además de la forma que menciona Triby para asignar propiedades a un elemento con jQuery, también puedes hacerlo con JS nativo.

Código Javascript:

var input = document.createElement("input"),
    fn = function(){
        alert("Estás escribiendo");
    },
    definirProp = function(elem, prop){
        for (var p in prop)
            elem[p] = prop[p];
        return elem;
    },
    invocar = new definirProp(input, {
        type: "text",
        id: "ejemplo",
        className: "classEjemplo",
        value: "Valor de ejemplo",
        onkeypress: fn
    });
 
document.body.appendChild(invocar);
 

De esta forma, creo un <input>, al cual le asigno propiedades y valores a través de una función. Para esto, la función recibe dos parámetros: el elemento y un objeto literal con las propiedades y valores que deseo asignar. Como extra, creé una función de nombre fn para asignarla al evento onkeypress del [inline]<input>[/input]. En la función definirProp, itero sobre el objeto literal, asignando cada propiedad al [inline]<input>[/input] y a estos, los valores respectivos.

Incluso podrías hacer crecer más esta función y darle la posibilidad al usuario de crear el elemento que quiera.

Código Javascript:

var obj = prompt("Ingrese el elemento a crear"),
    fn = function(){
        alert("Estás escribiendo");
    },
    definirProp = function(elem, prop){
        element = document.createElement(elem);
        for (var p in prop)
            element[p] = prop[p];
        return element;
    },
    invocar = new definirProp(obj, {
        type: "text",
        id: "ejemplo",
        className: "classEjemplo",
        value: "Valor de ejemplo",
        onkeypress: fn
    });
 
document.body.appendChild(invocar);
 

Ya luego sería cuestión de agregar validaciones para que el nombre del elemento a crear sea válido.

Saludos