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>
Respostas:
Você pode se inscrever no evento .click dos links e alterar o conteúdo do div usando o
.html
mé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
.delegate
método para anexar o manipulador.fonte
$('#content-container').html($('#someOtherDivId').html());
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(); });
fonte
$('a').click(function(){ $('#content-container').html('My content here :-)'); });
fonte
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.fonte
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); }); });
fonte
Experimentar
$('#score_here').html=total;
fonte