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>

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.


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();
});

5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});

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.


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.