addFields javascript being executed multiple times

[joraff]

I'm noticing something strange going on with nested_form and the click event on the add link where multiple empty rows are inserted from the blueprint with a single add link click. I highly doubt this involves nested_forms at all, but I'm only seeing this behavior here.

1. Clear browser cache
2. Navigate to your form that uses nested_forms
3. Click add link -> one row is inserted from the blueprint
4. Navigate to the same url as in step 2, and not by refreshing the browser
5. Click add link -> two rows are inserted from the blueprint
6. Repeat 4-5 n times and n + 1 rows are inserted with one click

This continues until the page is refreshed.

The blueprint content is correct. Placing a breakpoint in addFields shows, from the call stack, that jQuery is processing the click event multiple times.

Anyone else seen this?

[joraff]

Problem was with turbolinks. Removed from pipeline, works fine now.

[naturegirl]

I had the same issue, when removing turbolinks it was resolved. Thanks!

[JSanderbeck]

Has anyone fixed this? I am still having the issue even after I removed Turbolinks. It adds two entries every time I click Add...

[JSanderbeck]

Ok. I figured out how to fix it. You first have to remove the event. Also converted to .on as that is the preferred method now.

window.nestedFormEvents = new NestedFormEvents();
$(document)
.off('click','form a.add_nested_fields').on('click','form a.add_nested_fields', nestedFormEvents.addFields)
.off('click','form a.remove_nested_fields').on('click','form a.remove_nested_fields', nestedFormEvents.removeFields);
})(jQuery);