Javascript ，每个（）方法似乎都无法处理动态创建的元素

我试图弄清楚如何使用

each（）

方法循环遍历动态元素。如果元素不存在，则该方法似乎不起作用。我也不想使用

setTimeout

，我更喜欢不会延迟方法或事件的东西

到目前为止，我看到的所有研究和搜索都是使用

事件

处理程序来触发动态对象

$('.task').each(function() {

        let that = this;
        // let startTask = $('.start-task', that);
        let mc = new Hammer(this);
        mc.on("panright", function(e){

            if(e.deltaX < 100 ) {
                $(that).css('transform', 'translateX(' + e.deltaX + 'px' + ')');
                $(that).addClass('pan-task');
            } else {
                $(that).css('transform', 'translateX(100px)');
                $('.start-task', that).trigger('click');
            }
        });

        mc.on('panend', function(e){
            $(that).css('transform', 'translateX(' + '0' + 'px' + ')');
            $(that).removeClass('pan-task');

        });
    });

$（'.task'）。每个（函数（）{
让那=这；
//让startTask=$（'.start task'，即）；
设mc=新锤子（此）；
mc.on（“泛右”，功能（e）{
如果（如deltaX<100）{
$（that.css（'transform'，'translateX（'+e.deltaX++'px'+'））；
$（that.addClass（'pan-task'）；
}否则{
css（'transform'，'translateX（100px）'）；
$（'.start task'，that.trigger（'click'）；
}
});
mc.on（'panend'，函数（e）{
$（that.css（'transform'，'translateX（+'0'+'px'+'））；
$（that.removeClass（'pan-task'）；
});
});

这将适用于动态元素。这取决于你什么时候运行它。首先，你要做你在这里复制的事情，但是你要隔离函数中“每个”内部的内容。然后，在创建新任务时，运行与回调相同的函数

真正做一个以任务为参数的函数。否则，您可能会多次附加同一事件

function initTaskEvents(task) {
  let mc = new Hammer(task.get(0));
  mc.on("panright", function(e){
    if (e.deltaX < 100 ) {
      task.css('transform', 'translateX(' + e.deltaX + 'px' + ')');
      task.addClass('pan-task');
    } else {
      task.css('transform', 'translateX(100px)');
      $('.start-task', task).trigger('click');
    }
  });

  mc.on('panend', function(e){
    task.css('transform', 'translateX(' + '0' + 'px' + ')');
    task.removeClass('pan-task');
  });
}

到目前为止，它的功能与您已有的功能相同。但是，当您在DOM中插入新任务时，您也可以通过函数运行它

// ...
tasklist.append(myNewTask);
initTaskEvents(myNewTask);
// ...

这有意义吗？这是做这件事的常用方法

现在，如果您只附加事件（不是您的案例，因为您正在中间创建Hammer），那么您可以在jQuery中使用它

$('body').on('.task', 'click', function(event) {
  // ...
});

---

由于事件附加到

主体

和委托，因此它适用于尚不存在的事物。我已经在评论中看到了这一点，但是在您的案例中，同样不起作用，因为您正在根据任务创建一个Hammer对象

您可以使用
顾名思义，它用于观察DOM元素上的突变。这是监视DOM更改的最有效方法，并且在DOM更新后调用回调

const taskList = $('#task-list');
const observer = new MutationObserver((mutation, observer) => {
  // Looping only on added nodes
  mutation[0].addedNodes.forEach(node => {
    // Do something with added node
  })
})

const observerOts: MutationObserverInit = { attributes: true, childList: true, subtree: true };

observer.observe(taskList[0], observerOts);

---

这里有一个有效的

不确定我是否完全理解了这个问题，但是每次我必须循环一个动态元素列表时，我都使用事件委派方法，看起来这就是您在这里需要的

基本上，它包括将事件侦听器附加到父级，然后使用

event.target

获取需要使用的元素

---

David Walsh对此做了一个很好的解释：

从您的问题中我了解到，您希望向Hammer类返回的元素添加EventsListener，对吗？那么你能把你的锤子课也发出来吗？ 您可以尝试：

$(mc).on('panright', function() { ... })

---

好的，基本上你要告诉我的是在函数中插入代码。而不是最初加载脚本

$(mc).on('panright', function() { ... })