469,645 Members | 1,527 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

Dynamically assigned onclick event never executed when clicking link

b1randon
171 Expert 100+
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
  1. createList = function(arr)
  2. {
  3.     // clear previous list
  4.     //
  5.     this.clearSuggestions();
  6.  
  7.     // create and populate ul
  8.     //
  9.     var ulWrap = _bsn.DOM.createElement("div", { id:this.idAs+"div", className:this.oP.className });
  10.     var ulCont = _bsn.DOM.createElement("div", { id:this.idAs+"inner", className:"bd" });
  11.     var ul = _bsn.DOM.createElement("ul", {id:this.idAs, className:this.oP.className});
  12.  
  13.     var pointer = this;//problem here?
  14.  
  15.     for (var i=0;i<arr.length;i++)
  16.     {
  17.         var a = _bsn.DOM.createElement("a", { href:"#" }, arr[i]);
  18.         a.onclick = function () { pointer.setValue( this.childNodes[0].nodeValue ); return false; };
  19.         //alert(a.onclick);
  20.         var li = _bsn.DOM.createElement(  "li", {}, a  );
  21.         ul.appendChild(  li  );
  22.     }
  23.  
  24.     var pos = _bsn.DOM.getPos(this.fld);
  25.     ulWrap.style.overflow = "hidden";
  26.     ulWrap.style.left = pos.x + "px";
  27.     ulWrap.style.top = ( pos.y + this.fld.offsetHeight ) + "px";
  28.     ulWrap.onmouseover = function(){ pointer.killTimeout() }
  29.     ulWrap.onmouseout = function(){ pointer.resetTimeout() }
  30.     ul.style.width = this.fld.offsetWidth + "px";
  31.     ulCont.style.width = this.fld.offsetWidth + "px";
  32.     ulWrap.style.width = this.fld.offsetWidth + "px";
  33.     ulCont.style.height = ((ul.childNodes.length-1) * (this.fld.offsetHeight+12));
  34.     ulWrap.style.height = ((ul.childNodes.length-1) * (this.fld.offsetHeight+12));
  35.     //ulWrap.onclick = function(){alert('wrap')};
  36.     //ulCont.onclick = function(){alert('cont')};
  37.  
  38.  
  39.  
  40.     ulCont.appendChild(ul);
  41.     ulWrap.appendChild(ulCont);
  42.     ulWrap.innerHTML += "<!--[if lte IE 6.5]><iframe id=\"mask\" onclick=\"alert('hi')\"></iframe><![endif]-->";
  43.     //document.getElementsByTagName("body")[0].appendChild(ul);
  44.     document.getElementsByTagName("body")[0].appendChild(ulWrap);
  45.  
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.
Dec 11 '06 #1
1 2166
b1randon
171 Expert 100+
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
  1. function selVal(field, val){
  2.     field.value = val;
  3.     return false;
  4. }
  5.  
then changed the previous fn I posted to work as follows:
Expand|Select|Wrap|Line Numbers
  1.     for (var i=0;i<arr.length;i++)
  2.     {
  3.         var a = _bsn.DOM.createElement("div", { bgColor:"white" });
  4.         a.innerHTML = "<a href=\"#\" onclick=\"selVal(document.getElementById('"+pointer.fld.id+"'),"+arr[i]+");\">"+arr[i]+"</a>";
  5.         //javascript: selVal(document.getElementById('"+pointer.fld.id+"'),"+arr[i]+");" }, arr[i]);
  6.         //a.onclick = function () { pointer.setValue( this.childNodes[0].nodeValue ); return false; };
  7.         //a.onclick = eval(function (){ selVal(document.getElementById(pointer.fld.id),arr[i]);});
  8.         //a.onclick = function(){ alert('got it'); };
  9.         //alert(a.onclick);
  10.         var li = _bsn.DOM.createElement(  "li", {}, a  );
  11.         ul.appendChild(  li  );
  12.     }
  13.  
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.
Dec 12 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

17 posts views Thread by Mike Gratee | last post: by
2 posts views Thread by RobG | last post: by
16 posts views Thread by sirsean | last post: by
8 posts views Thread by hobosalesman | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.