Dynamically assigned onclick event never executed when clicking link

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • b1randon
    Recognized Expert New Member
    • Dec 2006
    • 171
    #1

    Dynamically assigned onclick event never executed when clicking link

    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:
    Code:
    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.brandspanki ngnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html) and select-free layer (http://www.hedgerwow.c om/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.
    Tags: None
    • b1randon
      Recognized Expert New Member
      • Dec 2006
      • 171
      #2
      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:
      Code:
      function selVal(field, val){
	field.value = val;
	return false;
}
      then changed the previous fn I posted to work as follows:
      Code:
      	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.

        Comment

        Previous template Next
        Working...