There are a number of ways around this.  For general 'click' events,
we let the event bubble up to the document and catch it there.  This
saves installing lots of event handlers, and means that it doesn't
need to be changed after an area of the page updates.  But for other
event types, this isn't supported well enough.  For example, submit
events definitely don't bubble on IE.

Following from other examples I've seen, I've now tended to move
towards creating simple classes to handle the initialisation, updates,
etc. for a particular panel, widget, etc.  This way, it's easy to add
and remove event handlers as necessary and helps ensure you do not
leak any.  Also, I tend to prefer to use Ajax.Request(), simply
because it affords a little more control.

In your situation, I would create a simple class to handle the list
initialisation and update.  E.g.

<ul id="myList">

var UpdatableList = Class.create( {
    initialize: function (listElement, updateURL) {
        this.listElement = $(listElement);
        this.updateURL = updateURL;
    startObserving : function() {
        // add event handlers
    stopObserving : function() {
        // remove event handlers
    update : function() {
        onUpdateSuccess = this.onUpdateSuccess.bind(this);
        onUpdateFailed = this.onUpdateSuccess.bind(this);
        new Ajax.Request(this.updateURL, {
            onFailure: onUpdateFailed,
            onSuccess: onUpdateSuccess
    onUpdateSuccess : function(response) {
    onUpdateFailed : function(response) {
        alert('oops... failure');

// to initialise a particular list as above
var myList = new UpdatableList('myList', '/my/list/update/url.html');

// to get the list to update itself


You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to