Porblema div y jquery

[Aronofsky]

Hola buenas tengo un problema al que no encuentro la solucion, si pudieran ayudarme se lo agradeceria

Tengo unos div's generados con php para mostrar unos datos de mysql

Código PHP:

  while($row = mysqli_fetch_array($result)){ 
        echo "<div class='ocasion_result glow'>"; 
                echo "</div>";  
   

Este es el estilo aplicado a esos div:

Código:

.ocasion_result{
	text-align: left;
	font-weight: bold;
	color: #6a9ab9;
	width: 70%;
	margin: 0 auto 2% auto;
	padding: 2% 0 0 2%;
	height: 120px;
	background-color: #f4f4f4;
	border: 2px solid #6a9ab9;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	cursor: pointer;
}

Le quiero aplicar un efecto con jquery, este concretamente:

Código:

$('.ocasion_result').click(function(){
    $(this).animate({
        height: '+=20'
    },'slow');
});

Pero no funciona. Lo he probado aqui http://jsfiddle.net/SUQA9/ y si funciona bién, yo no se que está pasando, si hay algún conflicto o que. Tengo la libreria enlazada ya que tengo otros efectos aplicados en la web. Puede ayudarme? Gracias

[Aronofsky]

Me ha pasado una cosa muy curiosa. He probado a lanzar el manejador desde otro elemento externo a ese div, concretamente unos enlaces que tenia aparte con una clase banderas

Código:

$('.banderas').click(function(){
    $('.ocasion_result').animate({
        height: '+=20'
    },'slow');

y si funciona! o sea que el codigo esta bien, el problema es que en el div en concreto no funciona porque habra algun conflicto con algo, pero no llego a ver cual que rabia

[Alexis88]

Sólo para descartar que esté sucediendo lo que creo, coloca los scripts justo antes de cerrar </body> para que se apliquen a los elementos del DOM luego de que éstos hayan cargado.

Saludos

[Aronofsky]

Ok gracias por la respuesta. Tienes razón el problema viene que el contenido es dinámico, lo genero con php a través de una peticion con ajax y por eso jquery no le afecta, porque esos objetos no existen al principio sino que los genero después con body onload

Estoy probando las funciones de jquery on() live() bind() delegate() que en mi inmensa ignorancia ni sabia de su existencia pero aún no he conseguido que funcione.

Gracias por la respuesta si consigo que vaya postearé la solución

[Aronofsky]

Buenas posteo para escribir la solución al problema que tenía y que ya conseguí solucionar, para quien le pueda servir.

Cuando generas código extra de forma dinámica fuera del código original de tu web con métodos de jquery como $.ajax, $.post o $.get como hacía yo de esta forma:

Código:

function mostrar(){
$.post("archivo",function(result){
$("element").html(result);
});}

Siendo archivo el fichero externo donde generas el código y element la etiqueta html donde insertarlo.

Si quieres aplicar un efecto jquery a esos elementos de forma normal no funcionará, ya que ese contenido ha sido generado aparte y no forma parte del árbol DOM. Para poder aplicarle un efecto hay que usar el método on()

[URL="https://api.jquery.com/on/"]https://api.jquery.com/on/[/URL]

De la siguiente forma:

Código:

$("elemento1").on("evento", "elemento2", function(){
     //Código a ejecutar
});

Siendo elemento1 el contenedor y elemento2 los generados dinamicamente sobre los que se le aplica el efecto. Por ejemplo:

Código:

<div id="elemento1">
<a class="elemento2" href="#">Enlace1</a> // Este es el
<a class="elemento2" href="#">Enlace2</a> // contenido generado
<a class="elemento2" href="#">Enlace3</a> // dinamicamente.
</div>

"evento" se refiere al disparador del efecto, como click, blur o keyup.

Espero le sirva de ayuda a alguien, tal vez os parezca algo muy básico pero a mí me ha llevado un par de días, ni siquiera sabía que existía ese método on() ni que jquery no afectaba a contenido generado aparte.

Un saludo

[Alexis88]

También puedes aplicar los métodos sin necesidad de usar el método on.

Código Javascript:

$("elemento").click(function(){
    //Instrucciones
});
 
$("elemento").keypress(function(){
    //Instrucciones
});
 
$("elemento").hover(function(){
    //Instrucciones
});
 

Pero con el método on tienes la ventaja de poder delegar eventos.

Saludos