473,388 Members | 1,298 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 software developers and data experts.

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 2335
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

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

Similar topics

17
by: Mike Gratee | last post by:
Is it possible to use JavaScript to cause the browser to click a link on a page and have the browser act exactly like the user had clicked on the link directly? In other words, I need to...
2
by: RobG | last post by:
I am trying to dynamically add an onclick to an element, however I just can't get the syntax right. consider the following function: function doClick (evt,x) { // do things with evt and x } ...
16
by: sirsean | last post by:
Hi all. I'm trying to dynamically build menus and objects after my page loads. Data is stored in an XML file and is parsed at runtime into Javascript objects. At the moment, I'm working on creating...
4
by: RobG | last post by:
I have a function whose parameter is a reference the element that called it: function someFunction(el) { ... } The function is assigned to the onclick event of some elements in the HTML...
2
by: djc | last post by:
On the page_load event I am querying a database and binding data to some text boxes, list boxes, and a repeater control. When the page loads it uses the value of one of the database fields (status)...
11
by: GaryB | last post by:
Hi Guys, I've been battling with this one for hours - I hope that you can help me! My code modifies the <aon a page, from a standard document link into a link with a tailored onclick event. ...
8
by: hobosalesman | last post by:
Consider the following (where 'a' is an anchor element with a valid URL href): a.onclick=help_mode; function help_mode() { alert("hi"); return false; } As expected clicking on the link now...
7
by: Ron Goral | last post by:
Hello I am new to creating objects in javascript, so please no flames about my coding style. =) I am trying to create an object that will represent a "div" element as a menu. I have written...
4
by: shuchow | last post by:
Hi, sorry for the basic question, but can someone explain to me some basic event attachment process. Say I have a function, dynamicallyCreateElement(), that creates an element. I want that new...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.