AJAX Zweiter Anruf funktioniert nicht

Question

Ich versuche, eine einfache Abstimmungsschaltfläche zu tun, aber es funktioniert nur einmal pro Beitrag per Nachladen.

Wie sollte es funktionieren: Klicken Sie auf "+" -> Update-Abfrage (in django) -> neu laden ein div (ändern "+" auf "-") -> erlauben, klicken Sie auf "-", um die upvote rückgängig zu machen

Es zeigt die "-" Taste, nachdem ich das erste Mal gewählt habe, aber wenn ich es anklicke, passiert nichts. Es funktioniert nur, wenn ich "F5" drücke und die Seite neu lade.

In der Konsole sind keine Fehler aufgetreten.

 ... some django scripts to check which button should be displayed ... 

     <span class="upvote"><span postId="{{post.id}}" class="vote" href="upvote/{{post.id}}">+</span></span> 

     <span class="downvote"><span postId="{{post.id}}" class="vote" href="downvote/{{post.id}}">-</span></span> 
     ... 

     $(document).ready(function(){ 
      $(".vote").click(function(e){ 
      href = $(this).attr("href"); 
      postId = $(this).attr("postId"); 
      $.ajax({ 
       url: href, 
       success: function() { 
        $("#post-"+postId+" >header").load(location.href+ " #post-"+postId+">header>*"); 
       }, 
      }); 
     }); 

Die „postID“ und „href“ Attribute sind richtig

gefüllt

Answer 1

Es ist nicht klar, was das Problem auf dem Code basiert Sie auf dem Laufenden, aber ich glaube, dass die <span>-</span> auf das DOM hinzugefügt wird nach klicken Sie auf <span>+</span>. Wenn dies der Fall ist, ist Ihr Problem, dass Sie nur $('.vote').on('click'... an die .vote Elemente gebunden haben, die im DOM waren, als dieser Code beim Laden der Seite zuerst ausgeführt wurde. Sie können dieses Problem beheben, indem Ereignis Delegation mit dem Event-Handler zu einem statischen Elternelement und wirken auf alle Ereignisse von Kindern kommen zu binden, die Ihre Wähler entsprechen:

$(document).on('click', ".vote", function(e){ 
    href = $(this).attr("href"); 
    postId = $(this).attr("postId"); 
    $.ajax({ 
     url: href, 
     success: function() { 
      $("#post-"+postId+" >header").load(location.href+ " #post-"+postId+">header>*"); 
     }, 
    }); 
})