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

Estoy captando un mensaje y lo muestro cuando las personas hacen clic en una selección de radio. Cuando trato de enlazar el nuevo elemento, se apila de formas extrañas. Comenzará a apilar los elementos. eg- [Click 1] message 1, [Click 2] message 1 and 2 y así sucesivamente.

He intentado un montón de diferentes maneras de atarlo. Mi esperanza era que la eliminación eliminaría #feedback y luego crearía y enlazaría el siguiente mensaje. Debo estar haciendo algo terriblemente mal. Sé que esto es muy similar a otros mensajes, pero los revisé todos y no pude encontrar una respuesta lo suficientemente clara 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>');
    });
};