cocoon select2 ajax load of partial - select2 element doesnt load - ruby-on-rails

Question

I have a rails app that uses cocoon
= link_to_add_association
to call the partial form
on the main form I have the coffee script to load all of the data for the select2 elements
when the ajax partial is inserted the select2 element doesnt appear. I need to instantiate it.
This is my form coffee/js
$(document).ready ->
$(".select2").each (i, e) ->
select = $(e)
options = {}
if select.hasClass("ajax")
options.ajax =
url: select.data("source")
dataType: "json"
data: (term, page) ->
q: term
page: page
per: 10
results: (data, page) ->
results: data
options.placeholder = "Select a value"
options.allowClear= "true"
options.dropdownAutoWidth = "true"
options.initSelection = (element, callback) ->
data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
callback data
select.select2 options
return
If I use the coocon - insert after binding to
$('body').bind 'cocoon:after-insert', (e, inserted_item) ->
$(".select2").each (i, e) ->
select = $(e)
options = {}
if select.hasClass("ajax")
options.ajax =
url: select.data("source")
dataType: "json"
data: (term, page) ->
q: term
page: page
per: 10
results: (data, page) ->
results: data
options.placeholder = "Select a value"
options.allowClear= "true"
options.dropdownAutoWidth = "true"
options.initSelection = (element, callback) ->
data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
callback data
select.select2 options
return
I get all elements on the page refreshed - naturally as I call all select2 objects. I didnt write this code for the select2 js.
All of the existing form elements are ok, but those elemeted added dynamically get refreshed - so they loose the values they have.
I want to only select the element added and make it work.
if i try
$('body').bind 'cocoon:after-insert', (e, inserted_item) ->
$(inserted_item).find(".select2").select2
return
It doesnt work either
Tried many options but my hair is thin now and I am needing help. JS is my arch enemy I really find it a pain .....
HELP!

Answer 1

$(document).ready ->
$('body').bind "cocoon:after-insert", (e, inserted_item) ->
select=$(inserted_item).find(".select2.ajax")
options = {}
if select.hasClass("ajax")
options.ajax =
url: select.data("source")
dataType: "json"
data: (term, page) ->
q: term
page: page
per: 10
results: (data, page) ->
results: data
options.placeholder = "Select a value"
options.allowClear= "true"
options.dropdownAutoWidth = "true"
options.initSelection = (element, callback) ->
data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
callback data
select.select2 options
return
Omg. hours on this and then I get it ....