Question

在</head>之前，我的jsp页面顶部有一个脚本。除<a>的onclick事件外，其他所有操作均按预期进行。这是我的代码：

$(document).ready(function () {
  $.ajax({
    url: 'paging',
    type: 'GET'
  }).success(function (data) {
    $('#pagination').empty();
    $.each(data, function (index, user) {
      $('#pagination').append($('<tr>')
        .append($('<td>').append($('<a>').attr({
          'onclick': 'GoToProfile(' + user.username + ')'
           }).text(user.username)))
        .append($('<td>').text(user.email)))
      });
    
      $("#sales").dataTable({
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
      });
   });
});
    
function GoToProfile(user) {
  window.location.href = "/profile/" + user;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

当我单击用户名时，为什么GoToProfile功能不起作用？我将它放在$(document).ready的内部，外部等不同的位置，但是没有用。

Answer 1

我会推荐这种方法，尽管其余代码编写得并不是很好。我没有测试它，但是应该可以。

$(document).ready(function () {
  function GoToProfile(user) {
    window.location.href = "/profile/" + user;
  }
  $.ajax({
    url: 'paging',
    type: 'GET'
  }).success(function (data) {
    $('#pagination').empty();
    $.each(data, function (index, user) {
      $('#pagination').append($('<tr>')
        .append($('<td>').append($(`<a data-username="${user.username}">`).text(user.username)))
        .append($('<td>').text(user.email)))
      });

      $("#sales").dataTable({
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
      });
   });
  $("#pagination").on("click", "a", function(){
    const $this = $(this);
    GoToProfile($this.attr(data-username));
  });
});

Answer 2

如斯科特·马库斯（Scott Marcus）所说：

List<Integer> newArrayList= input.stream()
     .map(String::toLowerCase)
     .distinct()
     .map(word-> word.substring(0, 1).toUpperCase() + word.substring(1))
     .collect(Collectors.toList());
}

应更改为

attr({'onclick': 'GoToProfile(' + user.username + ')'})

令人困惑的一点是，我在项目的其他位置对链接使用了完全相同的语法，并且它们工作得很好。我只是不知道为什么它在这里不起作用！

jQuery onclick事件不适用于链接

2 个答案: