[SOLUCIONADO] problemas con .append()

[mixzplit]

Hola colegas foreros, tengo un problema con la funcion append de Jquery. No he encontrado la manera de evitar que se acumulen los elementos cada vez que se ejecuta la funcion append() voy a color parte de codigo aqui:

Código Javascript:

$.post("controlador/controllerTraduccion.php",{op:'traducirEsp-Way',word:$("#palabraTr").val()},
        function(data){
            var json = JSON.stringify(data);    
            var datos = $.parseJSON(json);
            var response = JSON.parse(datos);
            $("#palabraID").val(response.way_id)
            $("#palabraTrad").val(response.way_palabra);
            $("#dir_sonido").val(response.way_sonido);
            
                $("#sound").on('click',function() {
               reproducir(response.way_id,response.way_sonido);
                });    
          });
 

Aqui hago un post para para consulta una tabla y devuelvo un arreglo JSON y lleno los campos, luego le doy click al elemento $("#sound") para que me ejecute la funcion reproducir() que es la siguiente:

Código Javascript:

function reproducir(id,sonido){
 
          $("#sonido").remove();
         $("#sound").append("<audio id='sonido'><source src='proyectoTraductor/"+sonido+"'></source></audio>")  
        $("#sonido")[0].play(); 
          alert($("#sound").html()); 
 
 
        //return false;
}
 

aqui agrego etiquetas audio al elemento $("#sound") con append(), fijense que estoy haciendo un remove del elemento que se genero, pero no me esta funcionado, el primer click me ejecuta bien y me emite el audio correcto, pero la segunda vez, me ejecuta el primer sonido y luego el segundo, cuando deberia ejecutarse solo el audio correspondiendo al segundo click.

Lo que hago es un traductor de palabras, cada vez que traduzco una palabra me llena los campos que puse arriba con el arreglo JSON

Espero puedan ayudarme, ya que no he dado con la solucion

Saludos y gracias


Espero que alguien me pueda ayudar y se lo agredezco de antemano

[Djoaq]

* * * *

Código Javascript:

*$("#sound").html("<audio id='sonido'><source src='proyectoTraductor/"+sonido+"'></source></audio>")*
 

función append/prepend sirve para eso para añadir al dom,
Debes usar html para tu propósito, y quitar el remove.

Salu2!

[madman_18]

Como te comenta Djoaq tendrías que tener el bloque #sound vacío y usar la función .html de jQuery para añadirle el tag de <audio> que necesitas

[mixzplit]

Hola compañeros, por alguna extraña razon, el alert que estaba mostrando al final de la funcion, para ver el comportamiento de los elementos agregados, era lo que me estaba afectando, quite el alert y todo funciona correctamente, cada vez que le de click al elemento $('#sound') me agregara el elemento $('#sonido') y ejecuta el sonido y si existe hace un remove() del elemento

Código Javascript:

function reproducir(id,sonido){
     
              $("#sonido").remove();
             $("#sound").append("<audio id='sonido'><source src='proyectoTraductor/"+sonido+"'></source></audio>") 
            $("#sonido")[0].play();
     
    }
 

Gracias por sus respuestas Saludos