0
145
ViewsEvento que no funciona en un bloque agregado a través de ajax
Yo uso thymeleaf con js.
<form class="row" id="testamentExecutor"> <div id="executorsSection" class="form-row"> <div th:insert="fragments/executor :: executor" th:remove="tag" /> </div> <div id="executorSectionAdd" class="deleteButton"> <a href="#" class="link-primary" id="addExecutor">Add</a> </div> </form>Código de marcos/ejecutores
Haga clic en evento en addExecutor para permitir agregar otro bloque de executorSection. La sección AlternativeExecutor está incluida en executorSection pero está oculta.
<script type="text/javascript" th:inline="javascript"> $(document).ready(function() { $(".delete-executor").on('click', function (e) { e.preventDefault(); $(this).parent().parent().remove(); }); $("#addExecutor").on('click', function (e) { e.preventDefault(); $.ajax({ url: "/executor", success: function (data) { $("#executorsSection").append(data); $("#executorSection, #executorSectionAdd, .deleteButton").removeClass('visually-hidden'); let nbExecutor = $('.executorSection').length; if (nbExecutor == 2) { $("#executorSectionAdd").addClass('visually-hidden'); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { } }); }); }); </script>Cuando agrego otro ejecutor, su evento (delete-executor, addAlternativeExecutor, delete-alternative-executor) no funciona para ellos
2 answers
Answer question0
Si está agregando nuevos elementos al DOM después de la definición de sus detectores de eventos, los detectores de eventos no funcionarán en los elementos recién agregados.
Puede agregar detectores de eventos solo a elementos que ya existen en el DOM en el momento en que se definen los detectores.
Cada vez que agrega un nuevo elemento al DOM, debe adjuntarle un nuevo detector de eventos (si necesita tener uno).
0
cuando llama a $(".delete-executor").on('click' lo está llamando a los elementos existentes actualmente.
agregar otro .delete-executor más tarde no agregará el evento a ese nuevo elemento automáticamente.
pero puede cambiar eso a $("#executorsSection").on('click', '.delete-executor' , en su lugar. Ahora el evento está en el contenedor en lugar del elemento mismo.