我一直在摸不着头脑......我有一个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>
非常感谢任何帮助,谢谢:)
答案 0 :(得分: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});
}
});
});
});
答案 1 :(得分:0)
最初取消注册您的点击处理程序可能值得这样:
$$('.todo-done a').each(function(a) {
$(a).stopObserving('click);
});
无论哪种方式,您都需要在oncomplete中添加新的事件处理程序,但这只适用于新的dom元素。
请记住Firebug和console.log()一直是你的朋友:)