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

i have rails app uses cocoon

= link_to_add_association

to call partial form

on main form have coffee script load of data select2 elements

when ajax partial inserted select2 element doesnt appear. need instantiate it.

this 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 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 use coocon - insert after binding

  $('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 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 elements on page refreshed - naturally call select2 objects. didnt write code select2 js.

all of existing form elements ok, elemeted added dynamically refreshed - loose values have.

i want select element added , make work.

if try

$('body').bind 'cocoon:after-insert', (e, inserted_item) ->   $(inserted_item).find(".select2").select2   return 

it doesnt work either

tried many options hair thin , needing help. js arch enemy find pain .....

help!

$(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 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 , ....