Agora eu sei que esta pergunta básica foi feita antes, mas devo estar fazendo algo errado. Eu sei que um elemento anexado deve ser vinculado antes que eu possa fazer qualquer coisa para ele. No entanto, por mais que eu tente, não consigo fazer funcionar.

Estou puxando uma mensagem e exibindo quando as pessoas clicam em um rádio. Sempre que tento ligar o novo elemento, ele se empilha de formas estranhas. Ele começará a empilhar os elementos. eg- [Click 1] message 1, [Click 2] mensagem 1 e 2 e assim por diante.

Eu tentei um monte de maneiras diferentes de vinculá-lo. Minha esperança era que a remoção tirasse o #feedback e depois criasse e vinculasse a próxima mensagem. Eu devo estar fazendo algo terrivelmente errado. Eu sei que isso é muito semelhante a outros posts, mas eu passei por todos eles e não consegui encontrar uma resposta clara o suficiente para ajudar. Agradeço antecipadamente.

O 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>');
    });
};