8

我正在创建一个内部有跨度的 li 项目。我在 span 中构建了一个 onclick 函数来获取父 li 的 ID 以传递给 JSON 获取请求。我不确定如何创建唯一 ID 并在 JS 函数中读取它。由于这是动态构建的，我没有构建开关，但我觉得我错过了另一个选择。这里的问题是我无法捕获 Li ID。我已经尝试过了，也尝试过基于班级，但似乎都失败了。

Li 对象创建：

$("#jdLists").append('<li class="bigger" id = "' + item.ID + '">'+ 
  item.GROUP_NAME + 
  '<span title="Remove from list" class=" Sp icon icon-color icon-plus" style="float: right; vertical-align: middle;" '+
  'onclick="spAdd()"></span>' + 
  '</li>');

点击功能：

function spAdd() {
  $(this).closest("li").attr('id');
}
4

2 回答 2

21

试试这样：

// Should work for most cases
function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}

// Create elements properly and attach click event
// before appending to DOM so it delegates the event
var $li = $('<li/>', {
  'class': 'bigger',
  id: uniqId()
});

var $span = $('<span/>', {
  'class': 'Sp icon icon-color icon-plus',
  title: 'Remove from list',
  text: 'I\'m a span',
  click: function() { 
    alert( $(this).parent().attr('id') );
  }
});

$('#jsLists').append( $li.append( $span ) );

它应该在点击时提醒 li 的随机 ID。也代替内联 css，为这些样式添加另一个类；更好，更简单，更容易。

演示： http: //jsbin.com/avevim/1/edit（ctrl+enter刷新并获取新id）

于 2012-12-26T18:02:21.297 回答
4

下划线为uniqueId这种情况提供了一个功能。它不会对日期和随机数感到棘手，而是保留一个全局计数器并在每次调用函数时递增它：

var idCounter = 0;
_.uniqueId = function(prefix) {
  var id = '' + ++idCounter;
  return prefix ? prefix + id : id;
};
于 2012-12-26T18:32:42.660 回答