프로토 타입으로 즉석에서 이벤트 첨부하기

Question

나는 1 시간 동안 내 머리를 긁어왔다. 나는 을 가진 todo 목록을 가지고 있으며, 각 항목에 버튼이있다. 사용자가 클릭 할 때마다 서버에 Ajax 호출을하고 마킹 기능을 호출 한 다음 전체 목록을 업데이트합니다.

제가 직면 한 문제는 버튼이 각 항목에 새로 추가되었습니다. 그리고 첫 번째 업데이트 후에 더 이상 click 이벤트를 첨부하지 않습니다.

새로 업데이트 된 요소에 이벤트 처리기를 프로토 타입으로 연결하는 방법은 무엇입니까?

참고 : 나는 인 evalScripts 통과했습니다

이

초기 이벤트 핸들러가 부착 업데이터 래퍼에게 진실을

<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

당신은 너무 코드가 같은 것을 보일 것이다 http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype

에서 GitHub의
일부 문서에서 낮은 프로 행동을 사용할 수 있습니다 : 무서운 들여 쓰기 미안

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

처음에는 클릭 한 번 등록을 취소하는 것이 좋습니다. 이 같은 dlers :

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

당신이 당신의 onComplete에서 새 이벤트 처리기를 추가해야하지만, 이것은 단지 새로운 DOM 요소에 필요한해야합니다 어느 쪽이든.

항상 방화범과을 console.log()는 당신의 친구 :) 것을 기억