使用jquerynext按钮调出下一个俱乐部

我有一个按钮，当按下它时，应该可以在不刷新的情况下将下一个俱乐部调到DOM。它对下一个俱乐部有效一次，但在那之后就不起作用了。我需要以某种方式更改按钮上的俱乐部id，以允许api获取下一个俱乐部的信息。我不知道最好的方法是什么。有什么想法吗

 <div class="container-fluid">
  <h1>Your Club</h1>
  <br>
    <div id="club-info">
    <h2 class="club-name"><%= @club.name %></h2>
    <br>
    <h2 class="club-brand"><%= @club.brand %></h2>
    </div>
  <br>
  <button class="next-club" data-id="<%= @club.id %>">Next Club</button>
  <br>
  <br>
  <%= link_to "See all of your clubs", club_path %>
</div>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('.next-club').click(function() {
      var id = $(this).data("id");
      $('#club-info').html('')
      $.get('/clubs/' + id + '/next', function(data, status) {
        $('#club-info').append(`<h2>${data.name}</h2>` + 
          `<br>` + 
          `<h2>${data.brand}</h2>`);
      })
    }) 
  });
</script>

你的俱乐部






下一个俱乐部




$（函数（）{
$（'.next club'）。单击（函数（）{
var id=$（this.data（“id”）；
$（“#俱乐部信息”）.html（“”）
$.get（'/clubs/'+id+'/next'，函数（数据、状态）{
$（“#俱乐部信息”）.append（`data.name}`+
`
`+
`${data.brand}`）；
})
}) 
});

获取请求成功时，您可以添加

$('.next-club').data('id', data.id);

---

上面将使用Jquery.data来更改发送的id。（）

成功后，您需要为按钮分配新id，并确保动态更新该按钮数据属性

选中

$that.data

分配新数据id的部分。如果使用友好id，则进行分配

$(document).on('click', '.next-club', function(e) {
   e.preventDefault();
   var id = $(this).data("id");
   var $that = $(this);         

   $.get('/clubs/' + id + '/next', function(data, status) {
        if(status == 'success'){
            $('#club-info').html('')
            $('#club-info').append(`<h2>${data.name}</h2>` + 
                   `<br>` + 
                   `<h2>${data.brand}</h2>`);
            $that.data('id', data.id); #assign new id
        }
   })
}

$（文档）。在（'click'，'next club'，函数（e）{
e、 预防默认值（）；
var id=$（this.data（“id”）；
var$that=$（this）；
$.get（'/clubs/'+id+'/next'，函数（数据、状态）{
如果（状态=‘成功’）{
$（“#俱乐部信息”）.html（“”）
$（“#俱乐部信息”）.append（`data.name}`+
`
`+
`${data.brand}`）；
$that.data（'id'，data.id）#分配新的id
}
})
}

这太完美了。谢谢！