¿Cómo es posible cambiar el contenido de este div, cuando se hace clic en uno de los LINKS?
<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>
Respuestas:
Puede suscribirse al evento .click para los enlaces y cambiar el contenido del div usando el
.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; });
Sin embargo, tenga en cuenta que si reemplaza el contenido de este div, el controlador de clics que ha asignado se destruirá. Si tiene la intención de inyectar algunos elementos DOM nuevos dentro del div para los que necesita adjuntar controladores de eventos, estos adjuntos deben realizarse dentro del controlador .click después de insertar el nuevo contenido. Si se conserva el selector original del evento, también puede echar un vistazo al
.delegate
método para adjuntar el controlador.fuente
$('#content-container').html($('#someOtherDivId').html());
Hay 2 funciones de jQuery que querrá usar aquí.
1)
click
. Esto tomará una función anónima como su único parámetro y la ejecutará cuando se haga clic en el elemento.2)
html
. Esto tomará una cadena html como su único parámetro y reemplazará el contenido de su elemento con el html proporcionado.Entonces, en su caso, querrá hacer lo siguiente:
$('#content-container a').click(function(e){ $(this).parent().html('<a href="#">I\'m a new link</a>'); e.preventDefault(); });
Si solo desea agregar contenido a su div, en lugar de reemplazar todo lo que contiene, debe usar
append
:$('#content-container a').click(function(e){ $(this).parent().append('<a href="#">I\'m a new link</a>'); e.preventDefault(); });
Si desea que los nuevos enlaces agregados también agreguen contenido nuevo al hacer clic, debe usar delegación de eventos :
$('#content-container').on('click', 'a', function(e){ $(this).parent().append('<a href="#">I\'m a new link</a>'); e.preventDefault(); });
fuente
$('a').click(function(){ $('#content-container').html('My content here :-)'); });
fuente
Puedes intentar lo mismo con replacewith ()
$('.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; });
El
.replaceWith()
método elimina contenido del DOM e inserta contenido nuevo en su lugar con una sola llamada.fuente
Intente esto para cambiar el contenido de div usando jQuery.
Ver más @ Cambiar el contenido 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); }); });
fuente
Tratar
$('#score_here').html=total;
fuente