Question

我有a代码的动态列表。我用onclick函数绑定它们。我想将该标记的类更改为active函数内的onclick。

list = list + "<li><a href='#' onclick='gotochapter(" + index + ")'><i class='fa fa-square-o'></i>Chapter-" + val.Chapter_Name + "</a></li>";
listdiv.append(list);

function gotochapter(index) {
    console.log(contentlist[index].Chapter_Name);
    $(this).addClass("active");
}

但这不起作用。

Answer 1

你的主要问题是当使用on*事件属性时，函数的范围将是window，而不是被点击的元素，因此this不是指你的内容期望的。

要解决问题并整理您的逻辑，您可以使用不显眼的事件处理程序：

// in a loop:
list = list + '<li><a href="#" data-index="' + index + '"><i class="fa fa-square-o"></i>Chapter-' + val.Chapter_Name + '</a></li>';

// outside the loop:
listdiv.on('click', 'a', function(e) {
  e.preventDefault();
  $('.active').removeClass('active');
  var index = $(this).addClass("active").data('index');
  console.log(contentlist[index].Chapter_Name);
}).append(list);

Answer 2

list = list + "<li><a href='#' onclick='gotochapter(" + index + " , this)'><i class='fa fa-square-o'></i>Chapter-" + val.Chapter_Name + "</a></li>"
  listdiv.append(list);
function gotochapter(index , obj)
{
    console.log(contentlist[index].Chapter_Name);
    $(obj).addClass("active");


}   // Pass this as argument

Answer 3

这不是要走的路。使用事件委托来动态添加元素。

var $listdiv = $("#listdiv")

$listdiv.on("click", "a", function(){
     $(this).addClass("active")
})

$listdiv.append("<a href='#'>Some link</a>")

此代码适用于现在和将来<a>。

更改锚点onclick函数的类

3 个答案: