在Rails中渲染部分内容时加载JavaScript文件

Question

I have a partial that displays a modal, and all modal content is dynamically generated when the modal pops up. The click events in the javascript file I have created aren't fired on click, which I assume is because the elements are created dynamically. How can I load the javascript file only once the modal is open? I'm trying to add a loading icon to a button once pressed, which is then switched out once the AJAX response returns, which is executed in create.js. Code:

partial:

#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

As you said, the listeners that you add are for elements that are already present in the document.

And, below code is the way to add listeners also for elements that are going to be created in future (dinamicallly created inside body element):

$(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>');
    });

});