Así que tengo una tarjeta en la que el usuario escribe un texto en el área de texto y luego hace clic en un botón para que desaparezca y se muestre como el div del título de la tarjeta, pero no registrará ninguna entrada.
La tarjeta se repetirá varias veces, por lo que necesito que el detector de eventos pueda diferenciar entre diferentes tarjetas.
Lo que he intentado es el siguiente jquery y algunos javascript como este:
let questionHeaderInput = document.querySelectorAll(".questionMainTextArea"); let questionHeader = document.querySelectorAll(".card-title"); questionHeaderInput.forEach(item => { questionHeader.innerHTML = item.value; }); $(".questionMainTextArea").on("change paste keyup input", function() { $(this).closest(".card-title").innerHTML = $(this).val(); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-body"> <div class="questionMainTextAreaContent"> <div class="questionMainTextAreaContentArea"> <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea> </div> </div> <div class="card-title questionHeader"></div> </div> </div>Puede probar la versión jQuery apuntando primero al .card-body más cercano y luego busque .card-title . No puede usar innerHTML en un objeto al que se hace referencia con jQuery, debe usar .text() . Además, adjuntar el evento en la input es suficiente.
Manifestación:
$(".questionMainTextArea").on("input", function() { $(this).closest(".card-body").find(".card-title").text($(this).val()); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-body"> <div class="questionMainTextAreaContent"> <div class="questionMainTextAreaContentArea"> <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea> </div> </div> <div class="card-title questionHeader"></div> </div> </div>