django jquery Kommentar Beitrag zu oft

Question

ich geändert habe meine comments/form.html und comments/posted.html in ähnlicher Weise wie Facebook zu arbeiten, dh Sie können Posten Kommentar, die Daten posted wird dann bis zu einem gewissen div mit einem gegebenen neu geladen und die anhängenden ID.

Das Problem, das ich habe, ist, dass es scheint, alle Daten für die Menge von Formularen zu veröffentlichen.

Also das Szenario ist, ich habe 5 Formulare, eins mit Daten drin, wenn ich dann Kommentar triff, gibt es die Daten ab, 1 erfolgreich aber 4 leer zurück.

<div id="commentload"></div> 
<div class="comments"> 
    <form action="{% comment_form_target %}" method="post" class="comment-form"> 
    {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %} 
    {% for field in form %} 
     {% if field.is_hidden %} 
      {{ field }} 
     {% else %} 
     {% if field.errors %}{{ field.errors }}{% endif %} 
      <p 
      {% if field.errors %} class="error"{% endif %} 
      {% ifequal field.name "honeypot" %} style="display:none;"{% endifequal %}> 
      </p> 
     {% endif %} 
    {% endfor %} 
    <textarea id="id_comment" rows="1" cols="60" name="comment" class='id_comment'></textarea> 
    <p class="submit"> 
     <input type="submit" name="post" class="submit-post blue comment_submit" value="{% trans "Comment" %}" id="button" style="float:right;margin-top:-6px;margin-bottom:4px;"/> 
    </p> 
    <div class="clearfix"></div> 
    </form> 

</div> 

Und dann sieht meine jQuery als

<script type="text/javascript"> 
    $(document).ready(function(){ 
     // Here it runs a simple each statement to apply a unique ID to each comment-form 
     $('.comment-form').each(function(){ 
      var element = $(this).find('#id_object_pk').val(); 
      $('#commentload').attr('id','commentload'+element); 
      $(this).attr('name', element); 
      $(this).attr('id', element); 
      $(this).find('#button').attr('id', element); 
      $(this).find('#id_content_type').attr('id', 'id_content_type' + element); 
      $(this).find('#id_timestamp').attr('id', 'id_timestamp' + element); 
      $(this).find('#id_security_hash').attr('id', 'id_security_hash' + element); 
      $(this).find('#id_comment').attr('id', 'id_comment' + element); 
     }); 

     $(".comment_submit").live("click",function() { 
      var ID = $(this).attr('id'); 

      var content_type = $('#id_content_type'+ID).val(); 
      var timestamp = $('#id_timestamp'+ID).val(); 
      var security_hash = $('#id_security_hash'+ID).val(); 
      var comment = $('#id_comment'+ID).val(); 
      var dataString = 'content_type='+ content_type +'&timestamp='+ timestamp +'&security_hash=' + security_hash + '&comment=' + comment + '&object_pk=' + ID; 

      if (comment=='') { 
       alert('Please enter a comment'); 
      } else { 
       $('#id_comment'+ID).val('').addClass("greyout"); 
       $.ajax({ 
        type: "POST", 
        url: "{% comment_form_target %}", 
        data: dataString, 
        cache: false, 
        success: function(html){ 
         $("#commentload"+ID).append(html); 
         $('#id_comment'+ID).val('').removeClass("greyout").focus(); 
        } 
       }); 
      } 
      return false; 
     }); 
    }); 
</script> 

OUTPUT zwischen den Formen der Unterschied HTML folgt offensichtlich der ID für jede

<div id="wall-comments"> 
    <div class="comments"> 
    <form action="/comments/post/" method="post" class="comment-form" id="114"> 
     <input type="hidden" name="content_type" value="wall.post" id="id_content_type114"> 
     <input type="hidden" name="object_pk" value="114" id="id_object_pk"> 
     <input type="hidden" name="timestamp" value="1291370494" id="id_timestamp114"> 
     <input type="hidden" name="security_hash" value="2d208d05d725528dfef940d8a5b520362faa3317" id="id_security_hash114"> 
     <textarea id="id_comment114" rows="1" cols="60" name="comment" class="id_comment" style="height: 24px; overflow-x: hidden; overflow-y: hidden; "></textarea> 
     <p class="submit"> 
      <input type="submit" name="post" class="submit-post blue comment_submit" value="Comment" id="114" style="float:right;margin-top:-6px;margin-bottom:4px;"> 
     </p> 
     <div class="clearfix"></div> 
    </form> 
    </div> 
</div> 

Answer 1

Sie sind verbindlich den Klick funktionieren zu oft. Sie sollten nur .live aufrufen ("click", function() {}); Einmal pro Seite laden. Andernfalls sollten Sie die Funktionen von sterben() verwenden, bevor Sie die Funktionen erneut aufrufen, bevor Sie live() aufrufen.

Ich denke immer noch, das ist die Antwort. Ändern Sie den Klick .Live Anruf zu sein:

$(".comment_submit").die("click").live("click",function() { 
    var ID = $(this).attr('id'); 

    var content_type = $('#id_content_type'+ID).val(); 
    var timestamp = $('#id_timestamp'+ID).val(); 
    var security_hash = $('#id_security_hash'+ID).val(); 
    var comment = $('#id_comment'+ID).val(); 
    var dataString = 'content_type='+ content_type +'&timestamp='+ timestamp +'&security_hash=' + security_hash + '&comment=' + comment + '&object_pk=' + ID; 

    if (comment=='') { 
     alert('Please enter a comment'); 
    } else { 
     $('#id_comment'+ID).val('').addClass("greyout"); 
     $.ajax({ 
      type: "POST", 
      url: "{% comment_form_target %}", 
      data: dataString, 
      cache: false, 
      success: function(html){ 
       $("#commentload"+ID).append(html); 
       $('#id_comment'+ID).val('').removeClass("greyout").focus(); 
      } 
     }); 
    } 
    return false; 
});