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