Event not working on a block added via ajax-CodePudding

I use thymeleaf with js.

<form  id="testamentExecutor">

    <div id="executorsSection" >

        <div th:insert="fragments/executor :: executor" th:remove="tag" />

    </div>

    <div  id="executorSectionAdd" >
        <a href="#"  id="addExecutor">Add</a>
   </div>

Code of framents/executors

CodePudding user response：

when you call $(".delete-executor").on('click' you are calling it on the currently existing elements.

adding another .delete-executor later will not add the event to that new element automatically.

but, you can change that to $("#executorsSection").on('click', '.delete-executor', instead. now the event is on the container instead of the element itself.

CodePudding user response：

If you're adding new elements to the DOM after the definition of your event listeners, the event listeners will not work on the newly added elements.

You can add event listeners only to elements that already exist in the DOM at the moment when listeners are defined.

Each time you add a new element to the DOM you have to attach a new event listener to it (if you need to have one).