0

我的应用程序允许用户创建帖子。每个帖子都有许多评论，并且帖子的 HTML 允许用户创建新评论。这是一篇文章的 HTML：

<div id="post_2_main_comments_thoughts" class="">
                    <form accept-charset="UTF-8" action="/posts/53/comments" class="new_comment" id="new_comment" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="private="></div>
                        <div id="post_2_main_comments_thoughts_author_pic" style="display: inline-block; vertical-align: top; padding: 3px; border: 1px solid #ddd; background-color: rgba(204, 204, 204, 0.2); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;">
                            <a href="/users/59" style="display: inline-block; text-indent: -9999px; width: 42px; height: 42px; background-image: url('/system/users/avatars/000/000/059/small/stringio.txt?1365876613'); background-repeat: none; border: 1px solid white; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;">Ryan</a>
                        </div>
                  <input class="new_comment_input" id="comment_content" name="comment[content]" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="thoughts?">
<button type="button" class="thoughts_attachment">Pick File</button><input data-fp-apikey="private" data-fp-button-class="thoughts_attachment" data-fp-button-text="Pick File" data-fp-drag-text="Or drop files here" data-fp-option-multiple="false" data-fp-option-services="" id="comment_attachment_url" name="comment[attachment_url]" size="30" type="filepicker" style="display: none;"> 

                  <input name="commit" style="visibility: hidden;" type="submit" value="Create Comment">
</form>             </div>

这是生成此 HTML 的 erb：

<div id="post_2_main_comments">
            <% post.comments.each do |comment| %>
                <%= render partial: 'comments/comment', locals: {comment: comment} %>
            <% end %>
            <div id="post_2_main_comments_thoughts" class="">
                <%= form_for [post, Comment.new] do |f| %>
                    <div id="post_2_main_comments_thoughts_author_pic" style="display: inline-block; vertical-align: top; padding: 3px; border: 1px solid #ddd; background-color: rgba(204, 204, 204, 0.2); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;">
                        <a href="<%= user_path(@current_user) %>" style="display: inline-block; text-indent: -9999px; width: 42px; height: 42px; background-image: url('<%= current_user.avatar.url(:small) %>'); background-repeat: none; border: 1px solid white; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;"><%= @current_user.name %></a>
                    </div>
              <%= f.text_field :content, class: "new_comment_input", value: "thoughts?", :onfocus => "if(this.value==this.defaultValue)this.value='';", :onblur => "if(this.value=='')this.value=this.defaultValue;" %>

              <%= f.filepicker_field :attachment_url, button_class: "thoughts_attachment" %> 

              <%= f.submit style: "visibility: hidden;"%>
            <% end %>
            </div>
        </div>

当我通过 HTML 创建帖子时，评论表单会正确呈现。但是，如果我通过 Ajax 创建帖子，然后通过 jQuery 将帖子附加到页面，它会错误地呈现文件选择器部分。也就是说，它不会呈现按钮，也不会将 style="display: none;") 添加到文件选择器输入字段。请参阅下面的区别。

<input data-fp-apikey="private" data-fp-button-class="thoughts_attachment" data-fp-button-text="Pick File" data-fp-drag-text="Or drop files here" data-fp-option-multiple="false" data-fp-option-services="" id="comment_attachment_url" name="comment[attachment_url]" size="30" type="filepicker">

如果我在 jQuery 添加的代码部分上手动添加按钮和文件选择器输入表单的附加 HTML，它可能看起来与 HTML 查询创建的帖子相同，但单击按钮不会欺骗文件选择器对话框。如果我刷新页面，将正确呈现有问题的评论表单。

如何让评论表单通过 jQuery 正确呈现我的按钮？

4

1 回答 1

1

查看filepicker.constructWidget调用，它将执行您正在查找的操作。请参阅https://developers.filepicker.io/docs/web/#widgets-programming

于 2013-04-17T02:59:41.387 回答