how to reload div with jquery and keep addEventListener working-CodePudding

Hello I have a problem when updating the "div", the refresh works well, however after the refresh when I click on the "div" which has just been updated I no longer have any reaction of my addEventListener javascript , why? and how to deal with this problem? thank you in advance.

here exemple onclick run perfect :

function updateDiv() { $( "#here" ).load(window.location.href " #here" ); }

but after the function bellow won't run anymore:

document.getElementById("here").addEventListener("click", () => { alert(" hello world !") }

CodePudding user response：

try adding onclick event like this

function updateDiv() {  $("#here").load(window.location.href   " #here");
$("#here").attr("onclick","alert()");
}

function alert(){

alert(" hello world !");
}

CodePudding user response：

You can use passive event listener to keep them even if the element is created/destroyed/reloaded at runtime

function updateDiv() {  $("#here").load(window.location.href   " #here");}



$("#here").on("click", () => { alert(" hello world !") })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="here">here</div>
<button onclick="updateDiv()">Click here</button>