Question

我试图将一些Div添加到一个带有id“list”的div中，并且每个div都有一个事件，所以我为每个要添加的div创建一个数组。这是我的代码。

var count = Object.keys(data.results).length;
        var el = [];
          for(var i=1; i<=count; i++){
            el[i] = $('<div id="'+i+'">data.results[i].name</div>');
            $("#list").append(el[i]);
            el[i].click(function(){
              alert(data.results[i].name);
              $('#searchbox').modal('toggle');
            });
          }

div中的数据已成功附加。但是，如果尝试在绑定到每个div的事件中提醒数据，它不会警告div中的数据。

我要做的是在div中使用id“list”附加一个div的名称，如果我点击一个名字，它应该提醒名称本身。

Answer 1

您可以通过在所有附加的div元素上使用委托事件处理程序来简化逻辑，然后使用text()方法检索所需的值。试试这个：

＆＃13;

var data = {
  results: {
    foo: { name: 'foo_name' },
    bar: { name: 'bar_name' }
  }
}

var $list = $("#list").on('click', 'div', function() {
  console.log($(this).text());
  //$('#searchbox').modal('toggle');
});

Object.keys(data.results).forEach(function(key, i) {
  $list.append('<div id="' + i + '">' + data.results[key].name + '</div>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list"></div>

＆＃13;

Answer 2

问题是，在点击元素时，i已设置为最大值i = count。要解决这个问题，你必须创建一个闭包。试试这个：

var count = Object.keys(data.results).length;
var el = [];
function closure(index){
  el[index].click(function(){
    alert(data.results[index].name);
    $('#searchbox').modal('toggle');
  });
}
for(var i=1; i<=count; i++){
  el[i] = $('<div id="'+i+'">data.results[i].name</div>');
  $("#list").append(el[i]);
  closure(i);
}

jQuery追加事件绑定

2 个答案: