django jquery 评论表单发布太多次

Posted 2023-02-24

【中文标题】django jquery 评论表单发布太多次

【英文标题】：django jquery comment form posting too many times

【发布时间】：2011-05-17 03:44:18

【问题描述】：

我已经修改了我的comments/form.html 和comments/posted.html 以与facebook 类似的方式工作，即您发布评论，然后重新加载数据posted 并附加到某个@ 987654324@ 与给定的ID。

我的问题是它似乎发布了表单数量的所有数据。

所以场景是，我有 5 个表单，其中一个包含数据，如果我点击评论，它会提交数据，1 个成功但 4 个返回空。

<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>

然后我的jQuery如下所示

<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>

HTML OUTPUT 表单之间的区别很明显是每个ID的区别

<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>

【参考方案1】：

您绑定点击功能的次数过多。你只应该调用 .live("click", function() );每页加载一次。否则你应该在再次调用 live() 之前使用 die() 取消绑定函数。

我仍然认为这是答案。将 click .live 调用更改为：

$(".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;
);

【讨论】：

感谢您的建议。我试过了，但它似乎仍然通过了所有表单进行验证。有没有其他方法可以解决这个问题？

你能发布一些生成的 HTML 表单吗？我会用 javascript 测试一下，看看发生了什么。

我在问题底部添加了一个 HTML 输出示例

我只能通过多次调用 .live 函数来重现。试试我刚刚添加到答案中的代码，如果有帮助，请告诉我。