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

假设我有一些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>');
    });
});

在这种情况下，当用户点击＃anchor1时会创建“test4”链接。

“test4”链接没有与它关联的click（）处理程序，即使它具有class =“myclass”。

任何想法如何我可以解决这个问题？

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

---

尝试委托下面的活动 -

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

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

---

不要在这种情况下听取个别物品，而是倾听他们的容器。 然后项目可以自由地添加到容器中或从容器中移除，并且您的逻辑将仍然有效。

我也有一个技巧的例子。 当心，这个例子是为Ext以前的版本编写的，所以你可能不能复制和粘贴它的代码，并期望它能在今天工作。 尽管如此，这个原则仍然适用，现在可以使用。

链接到源代码：http://examples.extjs.eu/itemclick.js

链接地址: http://www.djcxy.com/p/51459.html

上一篇: In Ext JS, how to attach events to dynamic html elements?

下一篇: Implementing jQuery's "live" binder with native Javascript