Question

我一直在摸不着头脑......我有一个todo列表，每个项目都有完成按钮。每次用户点击它时，它应该对服务器进行Ajax调用，调用标记函数然后更新整个列表。

我遇到的问题是新列表在每个项目上都有完成按钮。并且在首次更新后它不再附加click事件。

如何使用原型在新更新的元素上附加事件处理程序？

注意：我已将evalScripts：true传递给updater包装器

初始事件处理程序附加

<script type="text/javascript">
 document.observe('dom:loaded', function() {

  $$('.todo-done a').each(function(a) {
   $(a).observe('click', function(e) {
    var todoId = $(this).readAttribute('href').substr(1);
    new Ajax.Updater('todo-list', $.utils.getPath('/todos/ajax_mark/done'), {
     onComplete: function() {
      $.utils.updateList({evalScripts: true});
     }
    });
   });
  })
 });
</script>

updateList：

<script type="text/javascript">
 var Utils = Class.create({
  updateList: function(options) {
   if(typeof options == 'undefined') {
    options = {};
   }

    new Ajax.Updater('todo-list', $.utils.getPath('/todos/ajax_get'), $H(options).merge({
      onComplete: function() {
       $first = $('todo-list').down();
       $first.hide();
      Effect.Appear($first, {duration: 0.7});
      new Effect.Pulsate($('todo-list').down(), {pulses: 1, duration: 0.4, queue: 'end'});
     }
     })
    );     
  }
 })

 $.utils = new Utils('globals');
</script>

非常感谢任何帮助，谢谢：）

Answer 1

您可以在github上使用low-pro行为 http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype

上的一些文档

因此代码看起来像：

Event.addBehavior({
  '.todo-done a:click' : function(e) {
     var todoId = $(this).readAttribute('href').substr(1);
     new Ajax.Updater('todo-list', $.utils.getPath('/todos/ajax_mark/done'), {
      onComplete: function() {
        $.utils.updateList({evalScripts: true});
      }
     });
   });
});

Answer 2

最初取消注册您的点击处理程序可能值得这样：

$$('.todo-done a').each(function(a) {
   $(a).stopObserving('click);
});

无论哪种方式，您都需要在oncomplete中添加新的事件处理程序，但这只适用于新的dom元素。

请记住Firebug和console.log（）一直是你的朋友：）

用原型动态附加事件

2 个答案: