Estoy tratando de cambiar el color de fondo de los elementos html dinámicos ( span ) para que sean rojos cuando el usuario hace clic en ellos.
function showQuestion(){ for(let i = 0; i < QuesPartA.length; i++){ $(".questionBox").append('<div class="Question">Number '+ parseInt(i+1) +'</div>'); QuesPartA[i]['option'].forEach(option => { $(".questionBox").append('<span class="pilihan">'+option +' </span><br>'); }); } $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>'); }; Pero solo quiero hacer clic en el que cambia de color, no todo span.pilihan . Lo intenté de varias maneras, pero terminé cambiando todos los span para que fueran rojos o sin cambiar en absoluto. ¿Alguna idea de cómo hacerlo de manera efectiva?
Gracias por adelantado.
Puede usar eventos jQuery para obtener el elemento de clic.
Como abajo:
$(() => { generateQuestion(1); }); var q = 1; function generateQuestion(num) { var question = document.createElement("span"); question.innerHTML = "Question " + num; document.body.append(question); } $("body").on("click", "span", function(){ $(this).css("background", "red"); q++; generateQuestion(q); }); span { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Editar: ahora delegar