Ajax bind click к другому элементу

Question

У меня есть кнопка (это якорный тег с голосом класса), по которой нужно щелкнуть, чтобы проголосовать за статью через ajax-запрос.После этого я хочу обновить подсчет голосов в своем блэйд-представлении (это приложение laravel).Div с точками класса должен быть обновлен, но я не знаю, как связать точки при щелчке с вызовом ajax?

Я хочу связать точку с вызовом ajax, как я это сделал с кнопкой $, чтобы затем обновитьdiv с классом очков.

<a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}"></a>

Основной код:

<div data-id="{{ $article->id }}" class="points">{{ $article->votes->count() }}</div>

$(document).on('click','.vote',function(){
 var $counter = $(this).next();
 var $button = $(this);
 var id = $button.data('id');
 var token = $('meta[name="csrf-token"]').attr('content');
$.ajax({

  type:'POST',
  url:"{!! URL::to('article/vote/') !!}/" + id,
  dataType: 'JSON',
  data: {
      "_method": 'POST',
      "_token": token,
      "id": id,
  },
  success:function(data){
      $counter.html(data.count);
      var color = data.voted ? '#bbb' : '#38c172';
      $button.css('background-color', color);
      console.log('success');
      console.log(data);
  },
  error:function(xhr){
      if (xhr.status == 401) {
        window.location.href = "{!! URL::to('login') !!}";
      } else if (xhr.status == 403) {
        window.location.href = "{!! URL::to('email/verify') !!}";
      }
  },
});
});

Answer 1

Итак, вы хотите, чтобы ваш .points обновлялся, а не кнопка a, на которую вы нажали.

Сначала убедитесь, что ваши a и .points являются дочерними элементами одного и того же элемента divи там как:

<div>
    <a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}">
        button
    </a>
    <div data-id="{{ $article->id }}" class="points">
        {{ $article->votes->count() }}
    </div>
</div>
...
<div>
    <a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}">
        button
    </a>
    <div data-id="{{ $article->id }}" class="points">
        {{ $article->votes->count() }}
    </div>
</div>

Затем в вашем JavaScript определите элемент счетчика как

var $counter = $(this).parent().find('points');

и обновите ваш метод success:, чтобы применить класс CSS и поставить счетчик данных:

  $counter.html(data.count);
  var color = data.voted ? '#bbb' : '#38c172';
  $counter.css('background-color', color);

Дайте мне знать, если это имеет смысл, и вы можете закончить реализацию.