I’m working on creating a dynamic search page for campgrounds using a JSON file called from gitHub user boondocker.
I have my dynamic search working for updating as I type, but I’d like to be able to click/mouseover each created list item and show more details about it.
Problem is, I can’t seem to properly find the elements after they are created.
Here is my relevant code and the codepen page for the entire project. I’ve tried with vanilla JS and jQuery and haven’t been able to figure it out. The e.target value is returning 0 or undefined on each mouseover.
Would be very appreciative of any help. Thanks.
// each individual li (class is matches)
const matches = document.querySelectorAll('.matches');
// mouseover to show more details
$('.matches').on('mouseover', moreDetails);
function moreDetails(e){
console.log(`Listening to: ${e.target.value}`);
}
The key takeaway is that since you are dynamically creating those elements that you want event listeners on, you can simply attach the event listeners right after you have created them, and before you append them to another element.
I did smoething like this few days ago with jQuery, I was playing with add and remove elements from unordered list.
The way I done it is like this $(".class").on(“click”, function())… and that worked for me. I have that code on another computer I could probably send it later.