在附加元素上绑定方法答案

【问题标题】：Bind methods on appended elements在附加元素上绑定方法
【发布时间】：2016-06-03 20:24:16
【问题描述】：

我有一个带有 this.move 方法的 AgentClass。它适用于静态对象，但是当我通过 .append() 创建新的 HTML 对象时，我无法将它们与我的 this.move 方法一起使用。

所有新对象都有一个 ID，我想用 move 方法为它们设置动画。

我经常读到“live, on, ...”，但他们都需要一个活动......我没有这样的活动。他们直接移动。我尝试了类似的方法：

$('.agents').on("load", Agent.move());

但这不起作用...有什么想法吗？

Codesinppet：

var Agent = function(agentType, xTarget, yTarget) {
    ...
    this.move = function() {
        var id = this.agentId;

        $('.agent#'+id).animate({
            left:"200px"
        }, 1000);
    }
}

然后我像这样附加它们：

for (deployed = 0; deployed <= agents; deployed++) {
    $('.agents').append('<div class="agent" id="'+deployed+'"></div>');
}

如果有人可以帮助我，那就太棒了！？

【问题讨论】：

没有自动的方法来做到这一点。委托仅适用于事件。对于其他任何事情，您只需在附加元素后调用初始化函数。

标签： javascript jquery class methods append

【解决方案1】：

你可以使用 .clone(true) 一个布尔值，指示是否应将事件处理程序和数据与元素一起复制。默认值为 false。

    var agents = 6;
    for (deployed = 0; deployed <= agents; deployed++) {
        $element = $('<div class="agent" id="'+deployed+'"></div>').clone(true);
        $('.agents').append($element);
    }

.agent {
  height:50px;
  width:50px;
  background-color:yellow;
  margin-bottom:10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<title>Agent</title>
</head>

<body>
  <div class="agents">
  </div>
</body>

</html>

但是为了最大限度地优化事件，最好使用“on”事件处理程序来监视重新加载 DOM 后将添加的项目。这样分配的内存更少

【讨论】：