3rd party js (Malle) does not find elements generated by javascript in a promise (vanilla js)

I have a simple web page with some divs with data in them, and I would like to make some of the text editable by using Malle.js. This is super simple in theory, and it works perfectly for any text that is put directly into the HTML with the attribute data-malleable.

However, I am generating all that HTML with another bit of javascript. I thought doing that with a promise and then initialising Malle in the then clause should do the trick, but it doesn’t.

This is what I’ve got:

let promise = new Promise(function(resolve, reject) {
    let t = "test";
    createOutput();
    resolve(t);
}).then((t) => {
    console.log(t); //this works!
    console.log(document.querySelectorAll('.percent')); // this works as well
    // this still only targets the element that I put directly in the HTML
    let malle = new Malle({
        fun: (value, original, event, input) => {
            console.log(`New text: ${value}`);
            console.log(`Original element:`);
            console.log(original);
            return myFunctionReturningAPromiseString();
        },
    }).listen();
});

So the question is, how can I get Malle to grab all those lovely generated spans that have the data-malleable attribute?

Well, trying to create a minimal reproducible example actually solved my problem! There’s actually just some absolutely positioned element in the way – if I remove that, the code works fine. Thank you @C3roe!!