NeonRant
12/10/2019 - 12:57 AM

Binding to a dynamic element that does not exist at load time

To bind to an element that doesn't exist at laod time, you need to bind to a parent element (i.e. body is fine) and then you can target the element that doesn't exist at load time. You need to use the jQuery .on method to do this though.

.js
content_copyfile_download
$("body").on("click", ".mobile-search-wrapper > .box.filter > H2", function (event) { alert("On click!") });

// Note the selector is simply "Body". This can be used as the parent element. It can be closer if you like.
// The first parameter is the event, without the ON.
// The second argument is the selector that doesnt exist at the time of load
// The third paramter is the function that the event is attaching to.


// You can bind to a named event instead of an anonymous one 
let myNamedEvent = function () {
        alert('search toggled')
    }
    
    $("body").on("click", ".mobile-search-wrapper > .box.filter > H2", myNamedEvent);