javascript - 在 Ext JS 中，如何将事件附加到动态 html 元素？

Question

假设我有一些 Ext JS 代码将事件处理程序附加到类为“myclass”的所有元素。例如:

Ext.onReady(function(){
   Ext.select('a[class*=myclass]').on('click', function(event, elm){
      // do something
   });
});

我的 html 可能如下所示:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

这没问题。但是，请考虑“myclass”元素是否在将来某个时间写入页面。

例如:

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.select('a[id*=anchor1]').on('click', function(event, elm){
        Ext.get('panel').update('<a class="myclass" href="#">test4</a>');
    });
});

在这种情况下，“test4”链接是在用户点击 a#anchor1 时创建的。

“test4”链接没有关联的 click() 处理程序，即使它有 class="myclass"。

知道如何解决这个问题吗？

基本上，我想编写一次 click() 处理程序并将其应用于页面加载时出现的内容，以及稍后通过 Ajax/DHTML 引入的内容。

Answer 1

尝试像下面这样委托(delegate)事件 -

       Ext.getBody().on('click', function(event, target){
        var element = Ext.get(target);
        //perform your action here

        }, null, {
       delegate: '.myclass a'
       });