Question

I’m using scriptaculous Builder to generate some DOM elements dynamically, and one of them is a link tag. I wasn’t sure how to generate this with the click callback inline along with the rest of the Builder code, so I’m generating the link tag ahead of time and then inserting it with the rest of the Builder phase.

The problem is that the callback for the link is never actually executed when I click the link, and the URL bar changes to http://localhost/foo/bar/# instead. The callback method is a part of my class, so I’m binding it as an event listener ahead of time.

var Foo = Class.create ({
    initialize: function () {
        this.closeBinding = this.doClose.bindAsEventListener (this);
    },
    generate: function () {
        /* Create the link and bind the click listener */
        var close_link = Builder.node ('a', { href: '#' }, 'Close');
        Event.observe (close_link, 'click', this.closeBinding);

        /* Generate the new DOM nodes */
        return Builder.node ('div', [
            Builder.node ('h2', 'This is a test'),
            close_link
        ]);
    },
    doClose: function (evt) {
       /* This code is never called when I click the link. */
    }
});

Answer 1

So, I discovered the real problem. I actually wasn’t doing anything wrong in terms of how I was observing the event, but I left out a detail that didn’t seem relevant but apparently was relevant. The DOM code I’m generating is something that is being inserted into a Modalbox[1], and apparently that script is interfering with my event binding or something. The link that is observing a function on ‘this’ was confused because apparently ‘this’ was referring to the Modalbox, and not to my object Foo.

So my solution was perhaps a little less than ideal, but I found another way to access the data that was in ‘this’, and so the event binding is not in my way now.

[1]. http://okonet.ru/projects/modalbox/