Cómo eliminar un elemento anexo con Jquery y por qué unir o vivir está causando que los elementos se repitan

Question

Ahora sé que esta pregunta básica se ha hecho antes, pero debo estar haciendo algo mal. Sé que un elemento adjunto debe atarse antes de que yo pueda hacer algo al respecto. Sin embargo, por más que lo intente, no puedo hacer que funcione.

Estoy sacando un mensaje y visualizando cuando las personas hacen clic en una selección de radio. Cada vez que intento vincular el nuevo elemento, se acumula de maneras extrañas. Comenzará a apilar los elementos. por ejemplo, [Haga clic en 1] mensaje 1, [Haga clic en 2] mensaje 1 y 2 y así sucesivamente.

He intentado un montón de maneras diferentes de unirlo. Mi esperanza era que eliminar eliminaría #feedback y luego crear y enlazar el siguiente mensaje. Debo estar haciendo algo terriblemente mal. Sé que esto es muy similar a otras publicaciones, pero las revisé todas y no pude encontrar una respuesta lo suficientemente clara como para ayudar. Gracias de antemano.

El HTML

<div class="answers"> 
    <ul> 
     <li> 
      <input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label> 
     </li> 
    </ul> 
</div> 

JavaScript:

function feedback(message) 
{ 
    $('#answer').live('click', function() 
    { 
     $('#feedback').remove(); 
    }); 

    $('#answer').live('click', function() 
    { 
     $('.answers').append('<div id="feedback">'+message+'</div>'); 
    }); 
}; 

Answer 1

Si entiendo su pregunta correctamente, hice un fiddle que funciona correctamente. Este problema es con la forma en que se asignan los controladores de eventos y, como otros han dicho, tiene controladores de eventos que montan sobre. La mejor práctica actual de jQuery es usar on() para registrar manejadores de eventos. Aquí hay un enlace a la documentación de jQuery sobre on: link

Su solución original estaba bastante cerca, pero la forma en que ha añadido los controladores de eventos es un poco confuso. Se considera mejor práctica no agregar eventos a elementos HTML. Recomiendo leer sobre JavaScript discreto.

Aquí está el código de JavaScript. Agregué una variable de contador para que pueda ver que está funcionando correctamente.

$('#answer').on('click', function() { 
    feedback('hey there'); 
}); 

var counter = 0; 

function feedback(message) { 

    $('#feedback').remove(); 

    $('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>'); 

    counter++;  
} 

Answer 2

La función live está registrando un controlador de eventos click. Lo hará cada vez que haga clic en el objeto. Entonces, si hace clic dos veces, está asignando dos manejadores de clic al objeto. También está la asignación de un controlador de clic aquí:

onclick="feedback('the message html')"; 

Y entonces controlador de clic que es la asignación de otro controlador de clic a través de live().

realmente lo que pienso que usted quiere hacer es lo siguiente:

function feedback(message) 
{ 
    $('#feedback').remove(); 

    $('.answers').append('<div id="feedback">'+message+'</div>'); 
} 

---

Ok, por su comentario, trate de sacar la parte onclick del elemento <a> y en su lugar, poner esto en un controlador document.ready() .

$('#answer').live('click',function(){ 
        $('#feedback').remove(); 
        $('.answers').append('<div id="feedback">'+message+'</div>'); 
       }); 

Answer 3

¿Tiene varios botones de radio en la página ..

Porque lo que veo es que va a asignar los eventos a todos los botones de radio de en la página cuando se hace clic en un botón de opción

Answer 4

Me gustaría hacer algo como:

$(documento).on('click', '#answer', function() { 
    feedback('hey there'); 
});