如何确保在控制器特定的JS之后调用Rails资产管道中的JQuery脚本？

Question

For instance:

I have a general form error handling script which runs as follows:

function default_form_method(){
    $("form[data-remote='true']").bind("ajax:error", function(evt, xhr, status, error){
        //show the errors, etc.

    })
    .bind('ajax:success', function(evt, data, status, xhr){
// clear the form, etc.

    });
}

Now when I load a form remotely, via a partial such as index.js.erb:

$(function(){
    $(".listing").html("<%= escape_javascript(render 'matches/a_cool_form') %>");
});

The newly loaded form does not have the binding from default_form_method. In the past I've fixed this by calling the method again in js.erb as follows:

 $(function(){
        $(".listing").html("<%= escape_javascript(render 'matches/a_cool_form') %>");
default_form_method();
    });

But that seems redundant and I wonder (?) if it slows down performance.

What's the solution to get the asset pipeline methods to always bind, even when a form is loaded client-side? I'm assuming it has to do with loading the function last.

Answer 1

That's because bind will only bind to existing elements, not dynamically loaded elements. Have you tried on (replacement for live )?

function default_form_method(){
    $("form[data-remote='true']").on("ajax:error", function(evt, xhr, status, error){
        //show the errors, etc.
    })
    .on('ajax:success', function(evt, data, status, xhr){
      // clear the form, etc.
    });
}