[JS] prototypejs event handling

[Verwijderd]

Ik ben inmiddels een poosje met prototypejs bezig maar loop nu tegen het volgende aan.
Wanneer ik het base object extend en daar vervolgens het Observe element aanroep kent hij die niet meer in IE.

Voorbeeld code:

code:

function Test()
{
    this.id = 1;
}

Object.extend(Test.prototype,
{
    init:function()
    {
        var item = $('test');
        item.Observe('click', function(event) {
           alert('hoi');
        });
     }
});

wanneer ik in de pagina hier een nieuw object van maak werkt het prima in FF (hij kent de event netjes aan "test" toe maar in IE krijg ik een error.
Wanneer ik dan de init function code uit de eruit haal en gewoon in de function() Test zet werkt Observe wel. Voorbeeldcode:

code:

function Test()
{
    this.id = 1;
    var item = $('test');
    item.Observe('click', function(event) {
         alert('hoi');
    });
}

raar ... raaar... hoe kan dat?
Wie kent dit?

[crisp]

Doe je wellicht iets als:

JavaScript:

test = new Test();
test.init();

?

[Verwijderd]

test.init() roep ik aan in de function Test() dus die wordt gelijk aangeroepen bij het aanmaken van een nieuw object in de pagina:

Layout = new Test();

[crisp]

Ah, dus je voorbeeld is al incompleet?

Kan je misschien een simpele testpagina maken waarin dit 'fenomeen' zich voordoet, op deze manier is het koffiedik kijken. Ik kan nog wel wat mogelijke oorzaken verzinnen (zoals dat je in IE een element binnen een table nog niet kan aanspreken voordat de table zelf afgesloten is en gerendered), maar zonder voorbeeld blijven dat wilde gokken...

[Verwijderd]

ok:). Hierbij

code:

// JavaScript Document
function Layout()
{
    this.lastNewsItems = new Array();
    this.initMenuItems();
    
    this.rightSideDivId = 'right_side_div_id';
    this.leftSideDivId = 'left_side_div_id';
}

Object.extend(Layout.prototype,
{
    initMenuItems : function()
    {
        var menuParent = $('menu_div_id');
        menuParent.firstChild.descendants().each(function(n) {
            if (n.nodeName.match(/li/i)) {
                n.observe('mouseover', function(event){
                    n.setStyle({'backgroundColor':'#B7C1CB'});
                });
                n.observe('mouseout', function(event){
                    n.setStyle({'backgroundColor':''});
                });
            } else if(n.nodeName.match(/a/i)) {             
                Event.observe(n, 'click', function(e) {
                    if (n.id == 208) {
                        $('content_text').setStyle({'padding':0});
                        Port = new Portfolio();
                    } else {
                        $('content_text').setStyle({'padding':10+'px'});
                    }
                    LayoutObj.setLoadingImg($('content_text'));
                    /* some ajax calls is rest of code */
                    Event.stop(e);
                }, false);
            }
        });
    }
);

Obj = new Layout();

In FF werkt dit prima. Obj= new Layout(0 roep ik aan helemaal onder aan de pagina dus de elementen bestaan.
Wanneer ik de inhoud van de functie init() in de "hoofdfunctie" Layout zet werkt het wel in IE. Wat kan hier fout gaan?

edit:
Ik zie dat als ik de aanroep in de Observe load gooi dat het wel werkt.

werkt:
Event.observe(window, 'load', function(){
var LayoutObj = new Layout();
});

werkt niet:
var LayoutObj = new Layout();

Verklaring? zou de pagina bij de onderste aanroep toch nog niet helemaal geladen zijn?

[ Voor 10% gewijzigd door Verwijderd op 18-09-2007 14:31 ]