关于Malle.js无法识别Promise中动态生成元素的问题咨询

嘿，我太懂你这种头疼的情况了——明明动态生成的元素都带了data-malleable属性，Malle.js却只认一开始写在HTML里的静态元素，完全无视后来生成的那些，对吧？

先给你拆解下问题出在哪：Malle.js默认在你调用.listen()的时候，只会一次性扫描当时DOM里已有的符合条件的元素。你现在的代码里，虽然是在Promise的then回调里初始化Malle，但可能Malle的默认扫描逻辑没有覆盖到你刚生成的元素（或者说，你没明确告诉它要去监听这些新元素）。

给你几个实用的解决办法，挑适合你的来：

• 明确指定要监听的动态元素
  等createOutput()生成完所有元素后，手动获取所有带data-malleable属性的元素，然后把这个集合传给Malle的listen()方法，而不是让它自己默认扫描。修改后的代码大概是这样：

  let promise = new Promise(function(resolve, reject) {
    let t = "test";
    createOutput();
    resolve(t);
  }).then((t) => {
    console.log(t);
    console.log(document.querySelectorAll('.percent'));
    
    let malle = new Malle({
      fun: (value, original, event, input) => {
        console.log(`New text: ${value}`);
        console.log(`Original element:`);
        console.log(original);
        return myFunctionReturningAPromiseString();
      },
    });
    
    // 重点：手动获取所有目标元素，包括动态生成的
    const allMalleableElements = document.querySelectorAll('[data-malleable]');
    malle.listen(allMalleableElements);
  });
  

• 确认动态元素真的生成完毕了
  要是createOutput()内部本身还有异步操作（比如请求数据再渲染），那即使在Promise的then里，元素可能还没真正挂载到DOM上。这时候得把createOutput()改成异步函数，用await确保它完全执行完：

  let promise = new Promise(async function(resolve, reject) {
    let t = "test";
    // 等待createOutput内部的异步操作全部完成
    await createOutput();
    resolve(t);
  }).then((t) => {
    // 这里再初始化Malle并监听
    let malle = new Malle({
      fun: (value, original, event, input) => {
        console.log(`New text: ${value}`);
        console.log(`Original element:`);
        console.log(original);
        return myFunctionReturningAPromiseString();
      },
    }).listen(document.querySelectorAll('[data-malleable]'));
  });
  

• 给Malle实例手动添加新元素
  如果你之后还会动态生成元素，也可以在每次生成后，用malle.add(element)单独把新元素添加到监听队列里，这样就不用每次都重新扫描所有元素了。

核心思路就是：Malle不会自动监听后续动态添加的元素，你得主动把这些新元素“告诉”它，不管是一次性传入所有元素，还是逐个添加。

内容来源于stack exchange