Question

我使用javascript填充动态列表。我有一个onclick动作，我需要从列表中获取点击的项目。 HTML如下：

 <div class="cate-map">
    <ul id="option1" onclick="doSelection()">

    </ul>

    </div>

我将列表填充为：

jQuery.get(url, function(data) {
        for(i=0;i<data.length;i++){
            msg = "<li data-input="+data[i]+" class='selected'> <a href=#>"+data[i]+"</a></li>";
            document.querySelector('#option1').innerHTML +=  msg;
        }
    });

Onclick Listener如下：

function doSelection(){

    var id =$('#option1 li.selected').attr('data-input');
    alert(id);

}

问题是每当我点击li时，我仍然会得到列表的第一个元素。不是我点击的那个。请帮忙。

Answer 1

我建议您使用Event Delegation委托事件方法使用.on()。

即

$(document).on('event','selector',callback_function)

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免需要频繁附加并删除事件处理程序。

实施例

$('#option1').on('click', 'li', function() {
  var id = $(this).data('input');
  alert(id);
});

$(document).ready(function() {
  var data = [1, 2, 3];
  for (var i = 0; i < data.length; i++) {
    var msg = "<li data-input=" + data[i] + " class='selected'> <a href=#>" + data[i] + "</a></li>";
    $('#option1').append(msg);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cate-map">
  <ul id="option1">
  </ul>
</div>

Answer 2

这是因为所选的类位于您要附加到ul的每个元素上。您可能希望将onclick添加到每个列表项，以便直接拥有正确的上下文：

$('#option1 li').on('click', function(){
    alert($(this).data('input'));
});

当然，这需要在完成追加DOM之后执行。或者，您可以在追加时绑定每个元素上的onclick：

jQuery.get(url, function(data) {
    var $list = $('#option1');

    for(i=0;i<data.length;i++){
        var $listItem = $('<li data-input=" + data[i] + " class='selected'> <a href=#>" + data[i] + "</a></li>');

        $listItem.on('click', function(){
            alert($(this).data('input'));
        });

        $list.append($listItem);
    }
});

从ul获取点击元素

2 个答案: