首页 文章

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

提问于
浏览 次
1

假设我有一些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引入的内容 .

javascript html extjs extjs3

2 回答

  • 0

    在这种情况下不要听单个物品，而是听他们的容器 . 然后可以在容器中自由添加或删除项目，您的逻辑仍然有效 .

    我也有an example的技术 . 请注意，该示例是针对以前版本的Ext编写的，因此您可能无法复制和粘贴其代码并期望它今天可以正常工作 . 尽管如此，该原则仍然适用，现在可以使用 .

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

    回复于
  • 1

    尝试委托下面的事件 -

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

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

相关问题