Tengo un botón con un detector de eventos. Cuando alguien hace clic en él, todo el contenido de mi página web se reemplaza por otra cosa y se coloca un nuevo detector de eventos en todo el cuerpo de la página. Sin embargo, al hacer clic en el botón se activa instantáneamente el nuevo detector de eventos que solo se crea después de hacer clic en él. Por supuesto, hacer clic en el botón también significa que hizo clic en el cuerpo, pero el nuevo detector de eventos solo se crea a través del clic, por lo que pensé que no se activaría instantáneamente. No entiendo por qué sucede eso o cómo evitarlo. Espero que mi pregunta no sea demasiado tonta. Soy bastante nuevo en todo esto y trato de aprender los conceptos básicos.

 $("button").on("click", () => { $("body").on("click", () => { $("body").css({"background-color": "red"}); }); $("body").css({"background-color": "green"}); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Click Me</button>

Editado para aclarar mi punto. Editado de nuevo para incluir un ejemplo. ¿Por qué el cuerpo se vuelve rojo en lugar de verde?