如何在ajaxStop中动态创建输入范围元素(及其事件处理程序)

Question

我对js开发和ajax很陌生。我正在尝试编写一个网页，它使用ajax从服务器请求数据，并使用这些数据在带有传单的地图上绘制一组geoJSON功能(这些功能集必须是可切换的，才能绘制/取消绘制，因此我使用了传单的内置功能)。因为我不想在加载过程中遇到问题，所以我不得不将所有的动态创建代码都放在一个'ajaxStop‘回调中(即在所有ajax调用完成之后，代码就会运行)。

我需要做的部分工作是添加一个可变数量的滑块条(这取决于一个特定的功能集是否有时间组件)。我天真地将这些代码和代码附加到ajaxStop回调中的onchange事件处理程序中。创建了滑块条，但事件侦听器不存在(当我向事件处理程序添加调试语句时，移动滑块栏时什么都不会发生)。

它应该如何工作：滑块从一个时间段转到另一个时间段(对应于基于时间的特性集中的最小和最大时间)。当滑动条被移动时，特征集应该改变，这样只有那些时间小于滑块值的特征集在这个特征集的iLayers数组中(基本上是允许特征集在传单地图上可切换的一组特性的容器)。所有iLayers数组的旧全局变量将在事件处理程序开始时移除，更新后再添加到映射中。目前，除了这一次滑块以外的所有东西都能工作。

这是在js中添加滑块条及其事件处理程序的正确方法吗？实际上，我并没有确切地隔离这个问题，但是考虑到我过去没有遇到任何麻烦就动态地创建了dom元素和事件处理程序，我有一种感觉这个问题出现是因为这段代码是在ajaxStop中。

如果以前有人处理过这件事，我会非常感激你的一些建议。另外，我意识到我的代码现在看起来很糟糕，但我需要在清理之前让它以某种方式工作。我没有包含全局变量声明和其余的简洁代码( post已经足够大了)。

$(document).ajaxStop(function() {
   var feat_num = 0;

   for (var gView = 0; gView < geoViews.length; ++gView) {
      var layers = geoViews[gView].layers;
      println("GeoView " +gView +": " +geoViews[gView].descriptor);

      for (var lay = 0; lay < layers.length; ++lay) {
         var features = geoViews[gView].layers[lay].features;
         var iLayers = new Array(features.length);
         var layer_min = Number.POSITIVE_INFINITY;
         var layer_max = Number.NEGATIVE_INFINITY;
         var times = [];

         for (var feat = 0; feat < features.length; ++feat, ++feat_num) {
            geoViews[gView].layers[lay].features[feat] = feats[feat_num];

            var propsString = feats[feat_num].properties;
            var props = JSON.parse(propsString.replaceAll("'", '"'));

            if (props.hasOwnProperty("time")) {
               if (props.time < layer_min) layer_min = props.time;
               if (props.time > layer_max) layer_max = props.time;
               times.push(props.time);
            }
            iLayers[feat] = L.GeoJSON.geometryToLayer(feats[feat_num], null);
         }

         println("\u00A0" +"Layer " +lay +": " +layers[lay].uid);

         //Adds all features to overlay array on start
         var layer = geoViews[gView].layers[lay];
         layer.layerGroup = L.layerGroup(iLayers);
         L.tileLayer(mbUrl, {id: mapID, attribution: mbAttr});
         overlays[layer.uid] = layer.layerGroup;

         if (layer_max > Number.NEGATIVE_INFINITY) {
            print("\u00A0\u00A0\u00A0\u00A0\u00A0");
            print(new Date(layer_min));
            var s = addSlider(log, layer.uid, layer.features, layer_min, layer_max);
            sliders.push(s);

            //****This is not working (start)****
            s.addEventListener("onchange", function() {  //not working
               var iLayers;
               var time = slider.value;
               map.removeControl(overlays);
               for (var i; i < slider.possible.length; ++i) {
                  var props = JSON.parse(slider.possible[i].properties.replaceAll("'", '"'));
                  if (props.time <= time) {
                     iLayers[i] = L.GeoJSON.geometryToLayer(slider.possible[i], null); 
                  }
               }
               overlays[slider.uid] = iLayers;
               alert("trigger");
               L.control.layers(null, overlays).addTo(map);
            });
            //****This is not working (end)****

            log.appendChild(s);
            print(new Date(layer_max));
         }
      }
      L.control.layers(null, overlays).addTo(map);
      println(" ");
   }
});

Answer 1

我能够通过坚持我最初的想法并简单地使用这个单张滑块插片来解决这个问题。然后添加事件处理程序是不必要的，因为插件处理基于提供的基于滑块的属性(默认情况下为“时间”)添加/删除功能。