Botón añadir a favoritos (No los del navegador)

[enmaska]

Buenas noches...

Veréis tengo una duda, estoy creando un botón de favoritos, quiero que al pulsar añada la id que le indico por rel y que se quite "añadir a favoritos" y aparezca "quitar de favoritos", hasta aquí lo hace.

El problema viene luego que le pulso en "quitar de favoritos" la cual se modifico la class css mediante jquery, pero sigue llamando a la primera funcione .love_input aunque en el inspector de código aparece .love_eliminar (obviamente sin el punto).

El php funciona.

Otro dato a destacar es que salta el primer alert, el segundo

Código:

 alert( "Se guardaron los datos: " + datos + id)

no.

Aquí os dejo el código.

Muchas gracias!!!

Código:

 $('.love_input').click(function(e) {
       e.preventDefault()
       var id = $(this).attr("rel");
       $(this).text("Quitar de favoritos!");
       $(this).removeClass( "love_input");
       $(this).addClass( "love_eliminar");

	        $.ajax({
	            type: "GET",
	            url: "/ajax/love-ventas.php",
	            data: "id="+id,
	            success: function(datos){
		           	$(function() {
		    		
			    	});
		            return false;
		            alert( "Se guardaron los datos: " + datos + id)
	            }
	        });
       });



   $('.love_eliminar').click(function(e) {
       e.preventDefault()
       var id = $(this).attr("rel");
       $(this).text("Añadir a favoritos!");
       $(this).removeClass( "love_eliminar");
       $(this).addClass( "love_input");

	        $.ajax({
		            type: "GET",
		            url: "/ajax/love-ventas-clean.php",
		            data: "id="+id,
		            success: function(datos){
			           	$(function() {
			    		
				    	});
			            return false;
			            alert( "Se guardaron los datos: " + datos + id)
		            }
		        });
       });

[maycolalvarez]

recuerda que ajax es asincrono, por el cual deberías de colocar las lineas dentro del onredaystatechange (success para jQuery) que cambian el objeto del botón.

otro punto es que no deberías asignar el evento sobre la clase del botón, ya que al cambiarla no quita el evento, recuerda que lo que hace jQuery es buscar todos los elementos con la clase y les asigna el evento al elemento, NO a la clase, así que el mismo se conserva aún quites la clase, por lo que deberías de usar el botón para el evento y discriminar con la clase que tenga en dicho momento que acción ejecutar.

[enmaska]

Muchas gracias. Al final lo solucioné de otra forma, actualicé la librería jquery, estaba gastando la 1.4 y además cambié

$('.love_input').click(function(e) {

por esto otro

$(document).on('click', '.love_eliminar', function(e) {


Logrando así hacer su cometido, se que no está muy pulido, pero cumple su cometido. Si alguien se anima a mejorarlo.

Os dejo el código:

Código:

    $(document).on('click', '.love_input', function(e) {
	    e.preventDefault()
        var id = $(this).attr("rel");
        var action = $(this).attr("data-action");
        
        
        $(this).text("Quitar de favoritos!");
        $(this).removeClass( "love_input");
        $(this).addClass( "love_eliminar");
        
	        $.ajax({
	            type: "GET",
	            url: "/ajax/love-ventas.php",
	            data : {
				      id : id,
				      action : action
				  },
	            
	            success: function(datos){
		           	$(function() {
		    		
			    	});
		            return false;
	            }
	        });
	        console.log("GUARDADO!! --> " +id );
        });



//borrar love
    $(document).on('click', '.love_eliminar', function(e) {
        e.preventDefault()
        var id = $(this).attr("rel");
        $(this).text("Añadir a favoritos!");
        $(this).removeClass( "love_eliminar");
        $(this).addClass( "love_input");
        
	        $.ajax({
		            type: "GET",
		            url: "/ajax/love-ventas-clean.php",
		            data: "id="+id,
		            success: function(datos){
			           	$(function() {
			    		
				    	});
			            return false;
		            }
		        });
		        console.log("ELIMINADO!! --> " +id );
        });