使用javascript管理动态生成的元素

使用javascript管理动态生成的元素,javascript,html,google-maps-api-3,Javascript,Html,Google Maps Api 3,我有一段代码,可以根据特定的标准在谷歌地图上生成标记。我试图做的是在地图旁边生成一个列表,其中包含与列表上出现的每个标记相关联的地址以及每个地址旁边的复选框。在这个列表的底部有一个“优化”按钮,它只返回选中复选框的结果 我的问题是: 如何存储动态生成的复选框及其各自的地址字段,以便使用“优化”按钮更新和修改选择 我(或者我应该)如何设置每个复选框来在onClick上运行一个将从映射中删除标记的函数 在给定div内动态创建复选框 var holder = document.getElementBy

我有一段代码,可以根据特定的标准在谷歌地图上生成标记。我试图做的是在地图旁边生成一个列表,其中包含与列表上出现的每个标记相关联的地址以及每个地址旁边的复选框。在这个列表的底部有一个“优化”按钮,它只返回选中复选框的结果

我的问题是:

  • 如何存储动态生成的复选框及其各自的地址字段,以便使用“优化”按钮更新和修改选择

  • 我(或者我应该)如何设置每个复选框来在onClick上运行一个将从映射中删除标记的函数


  • 在给定div内动态创建复选框

    var holder = document.getElementById('holdingDiv');
    var newCheckbox = document.createElement('input');
    newCheckbox.type = 'checkbox';
    newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
    holder.appendChild(newCheckbox);
    
    要运行这些复选框并添加事件处理程序,请执行以下操作:

    // modify this if not just a bunch of checkboxes in a div:
    var checkboxes = holder.getElementsByTagName('input'); 
    for(var i=0; i < checkboxes.length; ++i) {
        var thisCheckBoxId = checkboxes[i].id;
        // create a listener
        var callback = function(event) {
            myGeneralHandler(i, event);
        }
        if(checkboxes[i].addEventListener) {
          checkboxes[i].addEventListener('click', callback, false);
        } else { //IE
          checkboxes[i].attachEvent('click', callback);
        }
    }
    
    //如果不只是div中的一组复选框,请修改此选项:
    var复选框=holder.getElementsByTagName('input');
    对于(变量i=0;i

    然后设置
    myGeneralHandler
    来处理来自任何复选框的单击。

    我做了类似的操作,只是将复选框添加到了span标记中。但是,我在将复选框放置在页面上的位置时遇到了问题。如果我将它们附加到保存map和其他元素的div元素上,这会更简单吗?尝试将span/div和map等复选框放入一个容器div中,这样至少可以将它们保持在一起,然后可以使用相对定位对其进行微调。