Alterar o conteúdo de div - jQuery

91

Como é possível alterar o conteúdo deste div, quando um dos LINKS é clicado?

<div align="center" id="content-container">
    <a href="#" class="click cgreen">Main Balance</a>
    <a href="#" class="click cgreen">PayPal</a>
    <a href="#" class="click cgreen">AlertPay</a>
</div>
Oliver 'Oli' Jensen
fonte
uma pergunta semelhante para consultar: stackoverflow.com/questions/1309452/…
Gurjot kaur

Respostas:

159

Você pode se inscrever no evento .click dos links e alterar o conteúdo do div usando o .htmlmétodo:

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').html(linkText);

    // cancel the default action of the link by returning false
    return false;
});

Observe, entretanto, que se você substituir o conteúdo deste div, o manipulador de cliques que você atribuiu será destruído. Se você pretende injetar alguns novos elementos DOM dentro do div para os quais você precisa anexar manipuladores de eventos, esses anexos devem ser executados dentro do manipulador .click após inserir o novo conteúdo. Se o seletor original do evento for preservado, você também pode dar uma olhada no .delegatemétodo para anexar o manipulador.

Darin Dimitrov
fonte
1
Como posso carregar conteúdo de OUTRO div, na mesma página, em # content-container?
Oliver 'Oli' Jensen
2
@Oliver 'Oli' Jensen, assim:$('#content-container').html($('#someOtherDivId').html());
Darin Dimitrov
Graças a Deus! Percebi que #div não pode ser alterado por .val (); em vez disso, devemos usar .html (); funções para fazê-lo funcionar! : D @cuSK thanks
gumuruh
live saver @DarinDimitrov
excitedmicrobe
14

Existem 2 funções jQuery que você deseja usar aqui.

1) click. Isso terá uma função anônima como único parâmetro e a executará quando o elemento for clicado.

2) html. Isso tomará uma string html como seu único parâmetro e substituirá o conteúdo do seu elemento pelo html fornecido.

Portanto, no seu caso, você desejará fazer o seguinte:

$('#content-container a').click(function(e){
    $(this).parent().html('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

Se você deseja apenas adicionar conteúdo ao seu div, em vez de substituir tudo nele, você deve usar append:

$('#content-container a').click(function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

Se você deseja que os novos links adicionados também adicionem novo conteúdo quando clicados, você deve usar a delegação de eventos :

$('#content-container').on('click', 'a', function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});
Joseph Silber
fonte
5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});
Jørgen
fonte
2

Você pode tentar o mesmo com replaceewith ()

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').replaceWith(linkText);

    // cancel the default action of the link by returning false
    return false;
});

O .replaceWith()método remove o conteúdo do DOM e insere novo conteúdo em seu lugar com uma única chamada.

Manoj Kadolkar
fonte
1

Tente isso para alterar o conteúdo de div usando jQuery.

Veja mais em @ Alterar conteúdo de div usando jQuery

$(document).ready(function(){
    $("#Textarea").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output").text(currentText);
    });
});
Jonathan klevin
fonte
-1

Experimentar $('#score_here').html=total;

Sanjay Devarajan
fonte