Filepicker按钮无法正确显示通过jQuery与Rails附加的div

Question

我的应用程序允许用户创建帖子。每篇文章都有很多评论，文章的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="https://stackoverflow.com/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雇员再培训局：

<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将帖子附加到页面，则会错误地呈现filepicker部分。也就是说，它不呈现按钮，它不会将style =“display：none;”）添加到filepicker输入字段。请参阅下面的差异。

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

如果我手动添加额外的HTML代码中对jQuery的添加代码部分按钮和filepicker输入形式，它可能看起来一样由HTML查询创建的职位，但点击按钮不会tricker一个文件选择器对话框。如果我刷新页面，则违规评论表单将被正确呈现。

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

Answer 1

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