Jquery更新文本只能运行一次

Question

除

外，此代码工作正常

 $('span.badgeAlert').text(counter - 1);

它只更新第一次点击的数量，然后重新加载页面。

我也试过了＃34; .live＆＃34;，但它也没有用。

$('.remove_notification').on('click', function () {
var id = $(this).data('id');
var url = $(this).data('url');
var counter = $('span.badgeAlert').data('value');
$.ajax({
    type: 'GET',
    url: url,
    data: {notifiable_id: id},
    success: function (data) {
        $('#item_notification_'+id).remove();
        $('span.badgeAlert').text(counter - 1);
        }
    });
});

标记是：

<li class="dropdown notification-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    <span class="glyphicon glyphicon-bell alertNotificacao"></span>
    <span class='badgeAlert' data-value="{{ DB::table('notifications')->count() }}">{{ DB::table('notifications')->count() }}</span>
    <span class="caret"></span>
</a>
<ul class="list-notificacao dropdown-menu">
 @foreach(\DB::table('notifications')->get() as $item)
     @if($item->type == 'App\Notifications\ArticleCreatedToAdmin')
        <li id='item_notification_{{ $item->notifiable_id }}'>
            <div class="media">
                <div class="media-body">
                    <div class='exclusaoNotificacao'><button class='btn btn-danger btn-xs button_exclusao remove_notification' data-id='{{ $item->notifiable_id }}' data-url="{{ route('notification.remove') }}">x</button>
                    </div>
                        <h5 class="media-heading"><a class="remove_notification" data-id='{{ $item->notifiable_id }}' data-url="{{ route('notification.remove') }}" href="{{ route('articles.show',$item->notifiable_id) }}">مقاله جدید</a></h5>
                </div>
            </div>
        </li>
     @endif
@endforeach
</ul>
</li>