Dynamically assigned onclick event never executed when clicking link

b1randon

First off, from the title my first thing to say would be that someone was probably assigning a function with parameters (which won't work). That's no the case. I'm using function (){ //dynamically build fn here } and it still won't work. I've even broken it down to building the link with # in the href and and onlick = function (){return false;} and sure enough the # ends up in my address bar even though the return false should stop it. Needless to say throwing an alert in that function does no good either. Here's a snippet:

Expand|Select|Wrap|Line Numbers

 
createList = function(arr)

{

    // clear previous list

    //

    this.clearSuggestions();
 
    // create and populate ul

    //

    var ulWrap = _bsn.DOM.createElement("div", { id:this.idAs+"div", className:this.oP.className });

    var ulCont = _bsn.DOM.createElement("div", { id:this.idAs+"inner", className:"bd" });

    var ul = _bsn.DOM.createElement("ul", {id:this.idAs, className:this.oP.className});
 
    var pointer = this;//problem here?
 
    for (var i=0;i<arr.length;i++)

    {

        var a = _bsn.DOM.createElement("a", { href:"#" }, arr[i]);

        a.onclick = function () { pointer.setValue( this.childNodes[0].nodeValue ); return false; };

        //alert(a.onclick);

        var li = _bsn.DOM.createElement(  "li", {}, a  );

        ul.appendChild(  li  );

    }
 
    var pos = _bsn.DOM.getPos(this.fld);

    ulWrap.style.overflow = "hidden";

    ulWrap.style.left = pos.x + "px";

    ulWrap.style.top = ( pos.y + this.fld.offsetHeight ) + "px";

    ulWrap.onmouseover = function(){ pointer.killTimeout() }

    ulWrap.onmouseout = function(){ pointer.resetTimeout() }

    ul.style.width = this.fld.offsetWidth + "px";

    ulCont.style.width = this.fld.offsetWidth + "px";

    ulWrap.style.width = this.fld.offsetWidth + "px";

    ulCont.style.height = ((ul.childNodes.length-1) * (this.fld.offsetHeight+12));

    ulWrap.style.height = ((ul.childNodes.length-1) * (this.fld.offsetHeight+12));

    //ulWrap.onclick = function(){alert('wrap')};

    //ulCont.onclick = function(){alert('cont')};
 
    ulCont.appendChild(ul);

    ulWrap.appendChild(ulCont);

    ulWrap.innerHTML += "<!--[if lte IE 6.5]><iframe id=\"mask\" onclick=\"alert('hi')\"></iframe><![endif]-->";

    //document.getElementsByTagName("body")[0].appendChild(ul);

    document.getElementsByTagName("body")[0].appendChild(ulWrap);

This code is a combo of autosuggest (http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html) and select-free layer (http://www.hedgerwow.com/360/bugs/css-select-free.html). If anyone can tell me why the events aren't firing I'd be much indebted. I'd like to work this into a patch for autosuggest because of the IE css select bug that select-free layer fixes. Thanks in advance.

b1randon

I've got it. I might have taken 5 years off of my life but this one is fixed. I ended up killing the dynamic assignment because it was messing up and being really verbose. I wrote a fn like this:

Expand|Select|Wrap|Line Numbers

 
function selVal(field, val){

    field.value = val;

    return false;

}

then changed the previous fn I posted to work as follows:

Expand|Select|Wrap|Line Numbers

 
    for (var i=0;i<arr.length;i++)

    {

        var a = _bsn.DOM.createElement("div", { bgColor:"white" });

        a.innerHTML = "<a href=\"#\" onclick=\"selVal(document.getElementById('"+pointer.fld.id+"'),"+arr[i]+");\">"+arr[i]+"</a>";

        //javascript: selVal(document.getElementById('"+pointer.fld.id+"'),"+arr[i]+");" }, arr[i]);

        //a.onclick = function () { pointer.setValue( this.childNodes[0].nodeValue ); return false; };

        //a.onclick = eval(function (){ selVal(document.getElementById(pointer.fld.id),arr[i]);});

        //a.onclick = function(){ alert('got it'); };

        //alert(a.onclick);

        var li = _bsn.DOM.createElement(  "li", {}, a  );

        ul.appendChild(  li  );

    }

As you can see from the comments there was a whole lot of trial and error but basically I used innerHTML (I know it isn't standard but it is well supported) to write out a link with the proper onclick event rather than assigning dynamically. I don't know why dynamic assignment of the event wouldn't work but at this point I'm cutting my losses and running.

Dynamically assigned onclick event never executed when clicking link

re: Dynamically assigned onclick event never executed when clicking link

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

/bytes/about