Jquery追加点击后li不起作用

Question

以前这是一个.hover函数，它运行得很好。不知何故，我把它改成onclick它不再起作用了。

可能有什么不对？我试着在这里和那里改变一些小东西，但它也不起作用。每次用户点击它时，我都会尝试在li的末尾附加一个按钮，并为li分配一个“已选中”的类。以下是我的代码片段。

$("ul#optionList li").on("click", function(){
  var test = $(this).attr('id');  //I still can get the ID

  $("ul#optionList li").removeClass('selected');  //  linesbelow don't work anymore
  $(this).addClass('selected');
  $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>");
}, function(){
  $(this).children("a").remove();
});

提前致谢

Answer 1

由于.click()不接受第二个处理程序，.append()不接受回调函数。我想你需要这样做：

$("ul#optionList li").on("click", function () {
    var test = $(this).attr('id'); //I still can get the ID

    $("ul#optionList li").removeClass('selected'); //  linesbelow don't work anymore
    $(this).addClass('selected');
    $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='" + test + "'>Check Answer</a>");
    $(this).children("a").remove();
});

Answer 2

我认为你应该尝试一下。

$("ul#optionList li").on("click", function(){
  var test= $(this).attr('id');  //I still can get the ID

  $("ul#optionList li").removeClass('selected');  //  linesbelow don't work anymore
  $(this).addClass('selected');
  $(this).append("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>");
  /*you can use it at the place of append
   $(this).after("<a href='javascript:void(0);' class='checkanswer2' id='"+test+"'>Check Answer</a>");
  */
  $(this).children("a").remove();
});

请查看图片以便理解。