Django/Ajax не освежает

Question

Я создал кнопку «Сохранить». Пользователь нажимает кнопку «Сохранить», чтобы сохранить запись в своей коллекции. Это изменит текст кнопки «Сохранить» на «Сохранено». Затем пользователь может нажать «Сохранено», чтобы сохранить запись.

Пользователь может сохранить запись успешно, и ajax обновит html, как ожидалось, изменив id="likes" на id="unsave".

Проблема в том, что ajax не подбирает id = "unsave", поэтому не направляется на URL-адрес unsave_release, он маршрутизируется на URL-адрес save_release.

примеры Url

http://127.0.0.1:8000/save_release/?release_id=585197&num_saves=14 http://127.0.0.1:8000/unsave_release/?release_id=585197&num_saves=14

Мне нужно сбросить Аякса каким-то образом после того, как пользователь делает первоначальный Сохранить ли?

models.py

@login_required 
def save_release(request): 

    release_id = None 
    num_saves = None 
    username = request.user.username 
    if request.method == 'GET': 
     release_id = request.GET['release_id'] 
     num_saves = request.GET['num_saves'] 

    if release_id: 

     insert = ChartsExtended(release_id=release_id,artist=username,url='Like',date='date',type='U',source='net') 
     insert.save() 
     num_saves = str(int(num_saves) + 1) 
     return HttpResponse(num_saves) 

@login_required 
def unsave_release(request): 

    release_id = None 
    num_saves = None 
    username = request.user.username 
    if request.method == 'GET': 
     release_id = request.GET['release_id'] 
     num_saves = request.GET['num_saves'] 

    if release_id: 

     insert = ChartsExtended.objects.get(release_id=release_id,artist=username) 
     insert.delete() 
     num_saves = str(int(num_saves) - 1) 
     return HttpResponse(num_saves) 

ajax.js

$(document).ready(function() { 

     // JQuery code to be added in here. 
     $('#likes').click(function(){ 
      var release_id; 
      var num_saves; 
      release_id = $(this).attr("data-releaseid"); 
      num_saves = $(this).attr("data-numsaves") 
      $.get('/save_release/', {release_id: release_id,num_saves: num_saves}, 

       function(data){ 

       $('#like_count').html(data + " people saved this"); 

       // $('#likes').css({"background-color":"#FF0000"}); 

       $('#likes').toggleClass("btn-info"); 
       $('#likes').text('Saved!') 
       $('#likes').attr('id','unsave'); 
      }); 
     }); 

     //this unsaves a release from Release 
     $('#unsave').click(function(){ 
      var release_id; 
      var num_saves; 
      release_id = $(this).attr("data-releaseid"); 
      num_saves = $(this).attr("data-numsaves") 
      $.get('/unsave_release/', {release_id: release_id,num_saves: num_saves}, 

       function(data){ 

       $('#like_count').html(data + " people saved this"); 

       // $('#likes').css({"background-color":"#FF0000"}); 

       $('#unsave').toggleClass("btn-success"); 
       $('#unsave').text('Save') 
       $('#unsave').attr('id','likes'); 
      }); 
     }); 

release.html

<h3 id="like_count">{{dict_item.cnt}} people saved this</h3> 


    <p><button id="likes" data-releaseid="{{ dict_item.id }}" data-numsaves="{{dict_item.cnt}}" class="btn btn-xlarge btn-success release-follow-buttons" type="button">Save</button></p> 

, который переходит в е ollowing после того как пользователь нажмет кнопку Сохранить

<p><button id="unsave" data-releaseid="release_id" data-numsaves="num_saves" class="btn btn-xlarge btn-success release-follow-buttons btn-info" type="button">Saved!</button></p> 

urls.py

url(r'^save_release/$', views.save_release, name='save_release'), 
url(r'^unsave_release/$', views.unsave_release, name='unsave_release'), 

Answer 1

Это потому, что, когда вы крепление onclick обработчика на элементе с идентификатором unsave, который в то время не существует и обработчик не подключен.

Вам необходимо либо прикрепить обработчик, когда вы измените id, либо лучшее решение будет, если вы используете delegated event handlers.

$(document).on("click", "#likes", function() { 
    // code 
}); 
$(document).on("click", "#unsave", function() { 
    // code 
}); 

Вам также не нужно присоединить эти делегированные события в вашей ready обратный вызов, потому что это не является необходимым для #likes и #unsave элементов существовать, когда вы сделаете это.