如何在 ajaxStop 中动态创建输入范围元素（及其事件处理程序）答案

【问题标题】：How to dynamically create input range element (and its event handler) inside ajaxStop如何在 ajaxStop 中动态创建输入范围元素（及其事件处理程序）
【发布时间】：2015-06-02 04:10:20
【问题描述】：

我是 js 开发和 ajax 的新手。我正在尝试编写一个网页，该网页使用 ajax 从服务器请求数据，并使用数据在带有传单的地图上绘制 geoJSON 功能集（这些功能集必须可切换以绘制/取消绘制，所以我使用传单的内置 -在功能上）。因为我不想在加载时遇到问题，所以我不得不将我所有的动态创建代码放在一个 'ajaxStop' 回调中（即代码将在所有 ajax 调用完成后运行）。

我需要做的部分工作是添加可变数量的滑块（这取决于特定功能集是否具有时间组件）。我天真地把这段代码和代码附加到 ajaxStop 回调中的 onchange 事件处理程序。滑块已创建，但事件侦听器不存在（当我将调试语句添加到事件处理程序时移动滑块时没有任何反应）。

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

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

如果其他人之前处理过这个问题，我真的很感激一些建议。我也意识到我的代码现在看起来很糟糕，但在我清理之前我需要让它以某种能力工作。为了简洁起见，我没有包含全局变量声明和其余代码（这篇文章已经足够庞大了）。

$(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(" ");
   }
});

【问题讨论】：

标签： javascript jquery ajax leaflet geojson

【解决方案1】：

我能够通过坚持我最初的想法并简单地使用这个leaflet slider bar plug-in 来解决这个问题。然后不需要添加事件处理程序，因为插件处理基于滑块提供的属性（默认为“时间”）添加/删除功能。

【讨论】：