Question

我试图弄清楚如何使用each()方法循环遍历动态元素。如果元素不存在，则该方法似乎无效。我也不希望使用setTimeout，也希望使用不会延迟方法或事件的东西。

到目前为止，我所看到的所有研究和搜索都是使用event处理程序来触发动态对象。

$('.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');

        });
    });

Answer 1

这将与动态元素一起使用。这取决于您何时运行它。首先，您要执行在此处复制的内容，但是要隔离函数中“每个”内部的内容。然后，在创建新任务时，您将运行与回调相同的功能。

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

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');
  });
}

如您所见，假定该参数已经是jQuery对象。这就是为什么我将.get(0)用于您的构造函数的原因。如果它接受jQuery对象，请将其删除。顺便说一句，不再需要它了，但是避免多次创建相同的jQuery对象$(that)，因为$实际上是一个昂贵的函数。您希望将其保存在变量中，然后重新使用。

然后，如果已经在加载页面时有任务，则可以在现有任务上使用它。

$(function() { // When ready
  $('.task').each(function() {
    initTaskEvents($(this));
  });
});

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

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

这有意义吗？这是常用的方法。

现在，如果您仅附加事件（由于在中间创建Hammer，则不附加案例），则可以在jQuery中使用它。

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

它适用于尚不存在的事物，因为该事件已附加到body和委托中。我已经在评论中看到了这一点，但是再次在您的情况下不起作用，因为您正在根据任务创建Hammer对象。

Answer 2

您可以使用MutationObserver实现此行为
顾名思义，它用于观察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);

这是工作中的example

Answer 3

不确定我是否确切地理解了问题，但是每次我必须循环遍历动态元素的列表时，我都会使用事件委托方法，看起来这就是您所需要的。

基本上，它包括将事件侦听器附加到父级，然后使用event.target获取需要使用的元素。

大卫·沃尔什（David Walsh）在这里做了一个很好的解释：https://davidwalsh.name/event-delegate

Answer 4

据我所知，您想将EventsListener添加到从Hammer类返回的元素上吗？所以你也可以发布锤子课程吗？您可以尝试：

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

，each（）方法似乎不适用于动态创建的元素

4 个答案: