Javascript 将传单'；活页夹弹出窗口

我正在尝试编写一个功能，用于通过传单功能的

layer.bindpoop

编辑功能属性。在这一点上，我几乎拥有了我所需要的一切，除了最后一件事：表示

layer.bindpoop

接受HTML字符串或HTML元素，因此，我需要将我的

HTMLString

与两个元素连接起来：

saveChanges

按钮和

speed\u input

输入，然后将

layer.bindpoop

与它一起馈送。使用

$.append

进行的任何操作都没有帮助。对如何解决这个问题有什么建议吗

function onEachArc(feature, layer) {
            // Create an input
            var speed_input = L.DomUtil.create('input', 'speed');

            // Set a feature property as value
            speed_input.value = feature.properties.speed;

            // Add a listener to watch for change on time input
            L.DomEvent.addListener(speed_input, 'change', function(){
                // Change the value of speed
                feature.properties.speed = speed_input.value;
            });

            // Bind popup to layer with input
            HTMLString = '<table style="width:100%">\
                <tr style="background-color:grey">\
                <th><b>Arc Numer: </b>' + feature.properties.linkstr + '</br></th>\
                </tr>\
                <tr>\
                <td><b>Speed: </b> ' + feature.properties.speed + '.</div></td>\
                </tr>\
                </table>';

            var saveChanges = document.createElement('button');
            saveChanges.innerHTML = 'Save Changes';
            saveChanges.onclick = function(){
                $.ajax({
                        type:"POST",
                        url:"php/updateFeature.php",
                        data: {feature: feature},
                        success: function(data){
                                $('#test').html(data);
                            }
                    });
                    //return false;
                    }
                };   

                /*
                This did not help
                var box =  document.createElement("div");
                    box.style.width = "100px";
                    box.style.height = "100px";
                $("#box").append("#saveChanges");
                layer.bindPopup(box);
                */

                layer.bindPopup(saveChanges);
            };

功能onEachArc（特征、图层）{
//创建输入
var speed_input=L.DomUtil.create（'input'，'speed'）；
//将要素特性设置为值
速度_input.value=feature.properties.speed；
//添加一个监听器以观察时间输入的变化
L.DomEvent.addListener（速度_输入，'change'，函数（）{
//改变速度的值
feature.properties.speed=速度\输入值；
});
//使用输入将弹出窗口绑定到图层
HTMLString=\
\
弧编号：'+feature.properties.linkstr+'
\
\
\
速度：'+feature.properties.Speed+'\
\
';
var saveChanges=document.createElement（'button'）；
saveChanges.innerHTML='saveChanges'；
saveChanges.onclick=function（）{
$.ajax({
类型：“POST”，
url:“php/updateFeature.php”，
数据：{feature:feature}，
成功：功能（数据）{
$（'#test'）.html（数据）；
}
});
//返回false；
}
};   
/*
这没有帮助
变量框=document.createElement（“div”）；
box.style.width=“100px”；
box.style.height=“100px”；
$（“#框”）.append（“#saveChanges”）；
层绑定弹出窗口（框）；
*/
图层绑定弹出窗口（保存更改）；
};

您可以使用innerHTML：

Element.innerHTML属性设置或获取描述元素子体的HTML语法

在

onEachFeature

功能中，附加一个单击处理程序：

L.geoJson(collection, {
  onEachFeature: function (feature, layer) {
    layer.on('click', layerClickHandler);
  }
});

并处理它：

function layerClickHandler (e) {

  var marker = e.target,
      properties = e.target.feature.properties;

  // Check if a popup was previously set if so, unbind  
  if (marker.hasOwnProperty('_popup')) {
    marker.unbindPopup();
  }

  // Create new popup from template and open it
  marker.bindPopup(template);
  marker.openPopup();

  // Now that the popup is open and the template converted to HTML and
  // attached to the DOM you can query for elements by their ID

  L.DomUtil.get('value-arc').textContent = properties.arc;
  L.DomUtil.get('value-speed').textContent = properties.speed;

  var inputSpeed = L.DomUtil.get('input-speed');
  inputSpeed.value = properties.speed;
  L.DomEvent.addListener(inputSpeed, 'change', function (e) {
    properties.speed = e.target.value;
  });

  var buttonSubmit = L.DomUtil.get('button-submit');
  L.DomEvent.addListener(buttonSubmit, 'click', function (e) {
    // Do fancy ajax stuff then close popup
    marker.closePopup();
  });

}

关于Plunker的示例：

---

这更干净、更快，它不会将弹出窗口绑定到每个标记。它更具可读性、可扩展性，并且不易出错。希望大家帮忙，祝你好运

我更喜欢outerHTML方法，因为我觉得最终使用HTML字符串更容易操作。但是如果我在这个按钮上添加

onclick

事件，它将不起作用：

button.onclick=function（e）{e.preventDefault（）；alert（“hi”）}

这很有意思，但我只是回答你的问题，这不是一种非常干净的方法。我会在我的回答中再详细说明一点。哇！这真是太花哨了！我正在查看示例，我理解了我之前的方法不起作用的原因——我在bindPopup中输入的HTML还不存在，正如示例中所解释的那样。但是我想不出先创建HTML，然后从

层访问它的方法。非常感谢你的帮助！是的，当您使用字符串弹出内容时，您只能在将其附加到DOM后查询其元素并附加处理程序。但是，您可以将eventhandler附加到已创建但尚未附加到DOM的HTMLelement。执行
var button=L.DomUtil.create（'button'，'my button'）
然后执行L.doEvent.addListener（button，'click'，function（）{}）`在将其添加到DOM中后效果非常好。但是当你把它转换成一个字符串，比如我的第一个例子：
var buttonHTML=button.outerHTML
监听器就会被破坏。
var template = '<form id="popup-form">\
  <label for="input-speed">New speed:</label>\
  <input id="input-speed" class="popup-input" type="number" />\
  <table class="popup-table">\
    <tr class="popup-table-row">\
      <th class="popup-table-header">Arc numer:</th>\
      <td id="value-arc" class="popup-table-data"></td>\
    </tr>\
    <tr class="popup-table-row">\
      <th class="popup-table-header">Current speed:</th>\
      <td id="value-speed" class="popup-table-data"></td>\
    </tr>\
  </table>\
  <button id="button-submit" type="button">Save Changes</button>\
</form>';

.popup-table {
  width: 100%;
}

.popup-table-row {
  background-color: grey;
}

L.geoJson(collection, {
  onEachFeature: function (feature, layer) {
    layer.on('click', layerClickHandler);
  }
});

function layerClickHandler (e) {

  var marker = e.target,
      properties = e.target.feature.properties;

  // Check if a popup was previously set if so, unbind  
  if (marker.hasOwnProperty('_popup')) {
    marker.unbindPopup();
  }

  // Create new popup from template and open it
  marker.bindPopup(template);
  marker.openPopup();

  // Now that the popup is open and the template converted to HTML and
  // attached to the DOM you can query for elements by their ID

  L.DomUtil.get('value-arc').textContent = properties.arc;
  L.DomUtil.get('value-speed').textContent = properties.speed;

  var inputSpeed = L.DomUtil.get('input-speed');
  inputSpeed.value = properties.speed;
  L.DomEvent.addListener(inputSpeed, 'change', function (e) {
    properties.speed = e.target.value;
  });

  var buttonSubmit = L.DomUtil.get('button-submit');
  L.DomEvent.addListener(buttonSubmit, 'click', function (e) {
    // Do fancy ajax stuff then close popup
    marker.closePopup();
  });

}