Apply an onclick function to dynamically created anchor tags

[MikeKoon]

I have successfully called a function ("kr_highlight") that creates map graphics of xy locations onto the map when the anchor tag is clicked WHEN my widget has the anchor tags hard coded into the widget.html page.

But now I want, after the widget loads, the anchor tags generated dynamically through js when the user clicks an "expand" link inside the widget.html page which populates the div.innerhtml.  During the dynamic generation I want to apply either an onclick function or an eventlistener to the id's of the dymaically generated anchor tags.  When I change I try to do this dynamically I get:

"Uncaught ReferenceError: kr_highlight is not defined"

where "kr_highlight" is the function being called from the onclick event. 

:

for (x in b){

   //dynamically create anchor tags

}
  

Version 1:

//now apply the onclick event to each id version 1

var id = document.getElementById("31");

        id.addEventListener("click",function(){
            kr_highlight('38.358569,-81.71833');
         });

Another version:

//now apply the onclick event to each id version 2

on("31", "click", kr_highlight('38.358569,-81.71833;;'));

[RobertScheitlin__GISP]

Mike,

   The way I would handle this is in your for look where you are creating the anchor element add the on click handler right there after the anchor is created (not afterwards trying to use dom.byId). Also kr_highlight will have to be a global level function declaration or just an inline function inside your loop where you create your anchors.

[MikeKoon]

Robert Scheitlin, GISP‌

I do have it in the loop but broke it out for clarification. When I create the elements I am actually using but creating dynamically upon user click. 

<a id="27" href="#" data-dojo-attach-event="onclick:kr_highlight" value="38.362933,-81.738416;;">

 so this works when hard coded in the widget.html.   

So, getting this to work with dynamically created anchor tags... Where do I declare the global level function?  I assume this is following the module declarations at:

function(declare, html, query, lang, dom, _WidgetsInTemplateMixin, BaseWidget, HorizontalSlider, TextBox, WMSLayer, WMSLayerInfo, Extent, ArcGISDynamicMapServiceLayer, on) {

var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-inundate',

dynalayer: null,

......

......

kr_highlight: function(latlong) {

}

......

......

});
return clazz;
});

[RobertScheitlin__GISP]

Mike your methodology is still quite a bit different from what I would implement.

Something roughly like this:

define([
    'dojo/_base/declare',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget',
    'dojo/_base/html',
    'esri/tasks/query',
    'dojo/_base/lang',
    'dojo/dom',
    'dojo/dom-construct',
....

],
  function (declare, _WidgetsInTemplateMixin, BaseWidget, html, query, lang, dom, domConstruct, WMSLayer, WMSLayerInfo, Extent, ArcGISDynamicMapServiceLayer, on, HorizontalSlider, TextBox) {

var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-inundate',
dynalayer: null,

....


for (x in b){
   var link = domConstruct.toDom('<a id="' + x + '" href="#" value="38.362933,-81.738416">' + att.name +'</a>');
   domConstruct.place(link , yourDomNode);
   on(link, 'click', function(){
     //Your kr_highlight function code
   });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MikeKoon]

Robert Scheitlin, GISP‌

so I got the inline function to at least find the function, which is great but the "map" object is now not recognized. Here is the code.  The last line is where it errors out with "Cannot read property 'centerAndZoom' of undefined". As a note, this did work when the html anchor tags were hard-coded so it has to do with this being created dynamically when the user clicks the "expand" link.

for (x in b){
      strID=c[1].trim();
      strY=c[5].trim();
      strX=c[4].trim();
      strName=c[2].trim();
      var link = domConstruct.toDom('<br><a href=\"#\" id=\"' + strID + '" value=\"' + strY + ',' + strX + '\^">' +    strName    +'</a>');
      console.log(link);
      domConstruct.place(link , currentObj);
      console.log('\"' + c[5].trim() + ',' + c[4].trim() + '^\"');
      alink=dom.byId(c[1].trim());
     on(alink, 'click', function(){
      latlong='38.358569,-81.71833^';
      console.log(latlong);
      //latlong=latlong.srcElement.attributes[1].nodeValue;
      console.log(latlong);
      KR_mapit2=latlong.split("^"); //this splits all

for (var nn = 0; nn < KR_mapit2.length-1; nn++) {
      //alert(jj);
      KR_mapit3=KR_mapit2[nn].split(",");
      y=KR_mapit3[0];
      x=KR_mapit3[1];
      Lat = parseFloat(y);
      Lng = parseFloat(x);
      var pt = new esri.geometry.Point(Lng,Lat, new esri.SpatialReference({wkid:4326})); //4326 is wgs 84
      console.log(pt);

      this.map.centerAndZoom(pt, 13);

[RobertScheitlin__GISP · Accepted solution]

Mike,

   That is because the scope of "this" is changed inside the inline function. to maintain the scope of "this" you need to use lang.hitch:

on(alink, 'click', lang.hitch(this, function(){
...
}));‍‍‍

[MikeKoon]

rscheitlin‌

It works - Thanks a bunch!