在Rails中部分渲染時加載JavaScript文件

Question

我有一個顯示模式的部分，當模式彈出時，所有模態內容都是動態生成的。我創建的JavaScript文件中的點擊事件不會在點擊時觸發，我認爲這是因爲元素是動態創建的。我只有在模態打開後才能加載JavaScript文件？我試圖在按下按鈕時將一個加載圖標添加到按鈕，然後在AJAX響應返回時將其切換出去，這會在create.js中執行。代碼：

部分：

#list_item_product_modal.modal._large.fade 
    .modal-dialog 
     .modal-content 
      .modal-body 
       .product_picker.product_picker_always_open 
        .row 
         .col-xs-12.col-md-10.col-md-offset-1 
          %h4.text-center.picker_title{ style: 'z-index:99;' } 
           %span 
            Add a Product 
          .input-group.input-group-lg 
           = text_field_tag :suggestion_search, '', class: 'form-control product_picker_input modal-focus', autocomplete: 'off', placeholder: 'Start typing a product name...' 
           %span.input-group-btn 
            %button.product_picker_submit.btn.btn-default 
             %i.fa.fa-search 
         .hidden-xs.hidden-sm.col-md-1.text-right 
          %button.close{ type: :button, 'data-dismiss' => 'modal', 'aria-hidden' => 'true' } 
           × 

        -# = form_tag main_app.products_path(), method: :post do 
        = form_tag main_app.list_items_path, data: { passthru: current_user.nil?, remote: true } do |f| 
         = hidden_field_tag :success, 'back' 
         = hidden_field_tag :list_id, args[:list].try(:id) || '0' 
         .product_picker_inner 
          .product_picker_body 

           .product_picker_details 
            .product_picker_details_default 
             = hidden_field_tag :product_id, '{raw-product_id}' 
             = hidden_field_tag :added_from, 'search' 
             %h4.text-center 
              {escaped-title} 
             .text-center.product_picker_category 
              %span 
               {escaped-category} 
             .product_picker_content 
              .row 
               .col-xs-12.col-md-6.product_picker_avatar6 
                %img.img.img-responsive.center-block{ src: '#{raw-avatar}' } 
                -# .rectangle-avatar.contain-image{ style: 'background-image: url("{encoded-avatar}")' } 
               .col-xs-12.col-md-6.product_picker_description 
                {escaped-description} 
               .col-xs-12.col-md-6 
                .text-center{ style: 'margin:1em 2em 0.3em 0' } 
                 price: 
                 %b 
                  {raw-price_formatted} 
              .row{ style: 'padding: 1em 0 0 0;' } 
               .col-xs-12 
                .fancy-span{ style: 'font-size: 0.8em' } 
                 %span Tell us about this product 
                = text_area_tag :comment, '', class: 'form-control' 
             .text-center.product_picker_controlls 
              = button_tag 'ADD', type: 'submit', class: 'btn btn-primary btn-lg t03e', id: 'product-{raw-product_id}' 
              -# %a.btn.btn-primary.btn-lg.t03e{ href: "#{products_path(list_id: args[:list].try(:id) || '0', success: 'back')}&u={raw-id}", data: { method: :post } } 
               ADD 
           .product_picker_loading_overlay 
            %div{ style: 'position: absolute;top: 50%;left: 0;line-height: 1.1em;right: 0;text-align: center;font-size: 40px;margin: -20px 0 0 0;' } 
             %i.fa.fa-circle-o-notch.fa-spin 
        .text-center{ style: '' } 
         %a{ href: '#', 'data-dismiss' => 'modal' } 
          CLOSE 

JS：

$(document).ready(function(){ 

    $('.btn.btn-primary.btn-lg.t03e').click(function(){ 
     $(this).html('<i class="fa fa-circle-o-notch fa-spin"></i>'); 
    }); 

}); 

Answer 1

正如你所說，你添加的聽衆是已經存在的文件中的元素。

而且，下面的代碼也增加聽衆對於打算在將來創建的元素的方式（body元素中dinamicallly創建）：

$(document).ready(function(){ 

    $('body').on('click', '.btn.btn-primary.btn-lg.t03e', function(){ 
     $(this).html('<i class="fa fa-circle-o-notch fa-spin"></i>'); 
    }); 

});