Añadir clase a botón pero no funciona. Avanzado

[victorfz]

Hola he colgado un ejemplo para poder ver el código de mi problema.
http://xurl.es/kwrp1

Resulta que tengo una plantilla html/css con botones que cambian de color con :hover
Lo curioso es que cuando ese mismo botón se muestra a través de una consulta ajax no ya no cambia de color, si que conserva los estilos (tamaño, color...) pero el color de :hover deja de hacerlo.

Para poder ver el error basta con clicar sobre el botón de radio etiquetado cono "Si" y se mostrará un botón que no cambia de color.

El probelma real por lo que veo con firebug es que al cargarse dinámicamente el botón con el texto "Mostrar empresas Funciona mal" este no llama a la función
function artButtonSetup(className)
que es la que hace que el boton cambie de color (bueno realmente lo que hace es cambia de posicion una imagen).

Pongo el código de la función que por algún motivo no es llamada cuando el botón se mustra tras una consulta ajax.

Código HTML:

/* begin Button */
function artButtonSetup(className) {
    jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function (i, val) {
        var b = jQuery(val);
        if (!b.parent().hasClass('dpw-button-wrapper')) {
            if (b.is('input')) b.val(b.val().replace(/^\s*/, '')).css('zoom', '1');
            if (!b.hasClass('dpw-button')) b.addClass('dpw-button');
            jQuery("<span class='dpw-button-wrapper'><span class='dpw-button-l'> </span><span class='dpw-button-r'> </span></span>").insertBefore(b).append(b);
            if (b.hasClass('active')) b.parent().addClass('active');
        }
        b.mouseover(function () { jQuery(this).parent().addClass("hover"); });
        b.mouseout(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
        b.mousedown(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
        b.mouseup(function () { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
    });
}
jQuery(function() { artButtonSetup("dpw-button"); });

/* end Button */

ya se que es bastante confuso el tema este pero agradeceria cualquier ayuda o comentario.
Gracias

[yoniti7784]

mmmm
lo mas probable es que sea por que lo tengas directo desde una funcion.

para serte sincero no se utilizar ajax.
Siempre que tengo errores utilizo tantos alert como sea posible. vas descartando los que no necesitas hasta llegar con el problema.

puedes realizar otras pruebas poniendole en html el evento y el nombre de la funcion creo que es un poco mas ordenado saber donde estas utilizando las funciones
<div id="boton_" mouseover="nom_over('boton_');" ... y bueno haci con todas sus funciones el problema es que saldrian demaciadas funciones. es tan solo otra manera de hacerle.

[Naahuel]

¿Y por qué utilizaste jQuery? Bastaba con usar :hover en CSS, ¿no?

En fin, respondiendo a tu pregunta: El problema está en que, efectivamente, el nuevo botón no tiene asignado el handler para el evento que dispara el cambio de clases. En lugar de asignar dicho handler con ".mouseover, .mouseout, etc" necesitás hacerlo con .delegate(). .delegate() es equivalente a .live() para asignar un handler, con la diferencia que los nuevos elementos que cumplan con el selector heredarán el handler sin necesidad de asignárselo de nuevo.

[victorfz]

Resulta que este codigo lo genera un software que genera plantillas HTML de muchisima calidad en muy poco tiempo y me fnciona super bien y me hace ahorrar mucho tiempo y dinero.
El único problema que tengo hasta ahora es ese.
No solo con lo de la imagen del botón ya que simplemente podría poner unos botones aparte que no usen jquery. Al recargar contenido dinamicamente hay algunos estilos aparte que no se cargan y eso me biene fatal para mis plicaciones.

Un saludo y haber si alguien mas se anma y me ayuda con el tama este que me lleva loco...

[inieva]

La función no es llamada porque la llamada se hace al momento de cargar la pagina principal y el contenido añadido por ajax simplemente no estaba comprendido. La solución es volver a realizar la llamada luego de que el contenido se haya añadido.

Hace la llamada artButtonSetup("dpw-button"); luego de obtener los resultados de tu petición ajax y después me contas.

Aca te dejo el código que creo que tendrías que modificar en tu archivo ajax.js:

Código:

function MostrarConsulta(datos,contenedor){
        divResultado = document.getElementById(contenedor);
        ajax=objetoAjax();
        ajax.open("GET", datos);
        ajax.onreadystatechange=function() {
                if (ajax.readyState==4) {
                        divResultado.innerHTML = ajax.responseText;

                        artButtonSetup("dpw-button"); 

                }
        }
        ajax.send(null)
}

Saludos!

[victorfz]

Iniciado por inieva

La función no es llamada porque la llamada se hace al momento de cargar la pagina principal y el contenido añadido por ajax simplemente no estaba comprendido. La solución es volver a realizar la llamada luego de que el contenido se haya añadido.

Hace la llamada artButtonSetup("dpw-button"); luego de obtener los resultados de tu petición ajax y después me contas.

Aca te dejo el código que creo que tendrías que modificar en tu archivo ajax.js:

Código:

function MostrarConsulta(datos,contenedor){
        divResultado = document.getElementById(contenedor);
        ajax=objetoAjax();
        ajax.open("GET", datos);
        ajax.onreadystatechange=function() {
                if (ajax.readyState==4) {
                        divResultado.innerHTML = ajax.responseText;

                        artButtonSetup("dpw-button"); 

                }
        }
        ajax.send(null)
}

Saludos!

Hola gracias por responder, creo que si que van por ahí los tiros.
Lo pruebo y te comento algo.
Un saludo.

[victorfz]

Iniciado por inieva

La función no es llamada porque la llamada se hace al momento de cargar la pagina principal y el contenido añadido por ajax simplemente no estaba comprendido. La solución es volver a realizar la llamada luego de que el contenido se haya añadido.

Hace la llamada artButtonSetup("dpw-button"); luego de obtener los resultados de tu petición ajax y después me contas.

Aca te dejo el código que creo que tendrías que modificar en tu archivo ajax.js:


Saludos!

Hola lo he probado y me dio algunos problemas pero ahora no se cómo pero funciona perfectamente ej ejemplo tal cual me lo habias puesto.
Puedes ver el ejemplo si quieres ya que lo he actualizado el el FTP.
Aprovecho para preguntar con algo parecido que me paso en esta misma plantilla.
¿Habría alguna forma de engañar a Jquery para que cuando haga un petición ajax jquery piense que se ha recargado toda la página y así evitarme estos problemas?
Muchas gracias y un saludo.

[inieva]

Bueno, yo no lo llamaría engañar y no sé si te resuelva tus problemas pero igual que hiciste esto recién de llamar a la función artButtonSetup después de que se completo la petición ajax podes llamar a una función que englobe todo lo que tu página principal hace al cargarse.