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

Question

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

我的问题是：

1. 我将如何存储动态生成的复选框及其各自的地址字段，以便我可以使用优化按钮更新和修改选择？

2. 我将如何（或应该）实际设置每个复选框以在 onClick 上运行一个函数，该函数将从地图中删除标记？

Answer 1

在给定的 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);
    }
}

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