Question

我有一个bootstrap复选框，里面有动态元素：

<div class="btn-group" style="margin-bottom:5px; width: 100%;">
                            <a id="urlFieldNameButton" class="btn btn-default btn-block dropdown-toggle btn-select" style="width: 100%;" data-toggle="dropdown" href="#">Select URL field name<span class="caret"></span></a>
                            <ul id="urlFieldName" class="dropdown-menu scrollable-menu" style="width: 100%;">
                            </ul>
                        </div>

以下是一个示例：http://www.bootply.com/9CvIygzob8

加载组合框元素的ajax函数如下所示：

function FillCombo(json, combo) {
                for (var i = 0; i < json.length; i++) {
                    var li = document.createElement("li");
                    var a = document.createElement("a");
                    a.innerHTML=json[i];
                    a.setAttribute("href","#");
                    //a.setAttribute("onclick", "selectElement()");
                    a.onclick = function(){ selectElement(a); };
                    li.appendChild(a);
                    combo.appendChild(li);
                }
            }

这是一个在我按下动态上传锚点时触发的函数：

function selectElement(a) {
    var selText = a.innerHTML;
    $("#urlFieldNameButton").html(selText+' <span class="caret"></span>');
}

我需要传递<a>标记作为参数，因为“this”对象等于window，而不是<a>，因为它与此函数调用的静态版本一样。

问题在于，当我按下此列表的任何动态上传的<a>时，该功能始终会收到最后一个（即使我先按下）。有没有更好的方法来处理动态内容？

Answer 1

我在最近的一个项目中遇到了类似的问题，我基本上使用了li的索引来确保特定的点击项目是注册onclick的那个...如果这有意义......我没有现在访问代码，但事实上它只获得最后一个意味着它需要知道哪个特定的li正在发送onclick ...所以你可以根据动态创建的li的特定id，索引那个李或它的.eq（）......

祝你好运。

Answer 2

这可能不是最佳解决方案，但似乎可以帮助您：

function FillCombo(json, combo) {
  for (var i = 0; i < json.length; i++) {
    (function(){
      var li = document.createElement("li");
      var a = document.createElement("a");
      a.innerHTML=json[i];
      a.setAttribute("href","#");
      a.onclick = function(){ selectElement(a); };
      li.appendChild(a);
      combo.appendChild(li);
    })();
  }
}

Quick preview（打开控制台窗口）。

Javascript生成动态下拉列表

2 个答案: