JQuery append com função

Question

Olá,

Tenho uma função que adiciona um link em uma div. E outra função que deve ser chamada pelo link adicionado pela primeira função.

Quando adiciono o link direto pelo HTML a segunda função funciona normalmente, mas pelo link adicionado pela primeira função, não funciona.

Segue o código.

    //Primeira Função: Adiciona o Link na div
    $(function () {
        $('#bl').click(function () {
            $('#dvTeste').html('<a href="#" class="lt">Remove teste adicionado</a>');
            return false;
        });
    });


    //Segunda Função: Remove a div
    $(function () {
        $('.lt').click(function () {
            $('#dvTeste').remove();
            return false;
        });
    });

O Html:

        <a href="#" id="bl">Adiciona teste</a>

        <div id="dvTeste">
            <a href="#" class="lt">Remove teste</a>
        </div>

Desde já, grato pela colaboração.

Answer 1

Olá Saulo !! :)

Adicionando o link com a primeira funcao, ¿funciona se você faz um "refresh"na página?

Answer 2

Olá Richof,

Mas se caso eu não quiser dar um refresh na página, usando esse exemplo para uma função ajax, como poderia fazer?

Answer 3

Saulo bom dia!

Tente assim:

 $(function () {
        $('#bl').click(function () {
            $('#dvTeste').html('<a href="#" class="lt">Remove teste adicionado</a>');
            $('.lt').click(function () {
                $('#dvTeste').html('');
                return false;
            });
           return false;
        });
    });

Abs

Answer 4

Use o jquery.on:

$(document.body).on('.lt', 'click', function(e){          
    e.preventDefault();     
    $('#dvTeste').html('');
});

Answer 5

Isso acontece porque você está atribuindo a função a uma classe, mas a classe ainda não "existe" no html.

O que você pode fazer é utilizar o jquery.on como o João Prado comentou.

Esta função vai colocar o evento no body da página, assim toda vez que você clicar no body, o jquery verifica se a classe clicada é a "lt" e dispara o evento.