Question

This jQuery selector matches a Rails 3 HTML form for a new model: $(‘form[id^=”new_”]’)

I’d like to have a simple focus function run each time a matching form loads. Sometimes the forms are loaded via a simple GET but also via Ajax. In the latter case, the content returned can be either HTML or escaped JS.

I was hoping jQuery would be able to match all cases via the selector, .on(), and the “load” event, but I can’t seem to make that work for ANY case. Code:

$(document).ready(function() {
    $('form[id^="new_"]').on("load", function(){
        console.log("Matched!")
    });
})

Any ideas?

---

Thanks Justice. I’m afraid I wasn’t able to get your code to work. I’m using the following callback with the new custom event defined outside it as shown and I don’t think the $(‘form’) is triggering the event.

$('.shows-children').bind('ajax:success', function(evnt, data, status, xhr){
    var boxSelector = '#' + $(this).data("shows");
    $(boxSelector).html(xhr.responseText);
    $('form').trigger('customevent');
});

$(document).on('customevent','form[id^="new_"]', function(){
    console.log('Matched!')
});

(I’m surprised it seems more involved than expected to have jQuery act on HTML returned in an Ajax response.)

Answer 1

$(document).on("change","form[id^=\"new_\"]" function(){
        console.log("Matched!")
    });

For delegation, you want to delegate the original selector to a parent, as the event will bubble up.

However, load does NOT bubble up. In this case, change may suffice, but it’ll trigger and attempt to see if the delegate is valid every time the document changes.

I would then suggest that you create a custom event after AJAX loads for the form.

Example:

$(document).on("customevent","form[id^="new_"]" function(){
    console.log("Matched!")
    $.ajax(url, function(response){
        //success
       $(document).append(response);
       $('form').trigger('customevent');
    });
});

HTH