Having multiple Select2 selects on a page, dynamically added by user

[m...@turkmenweb.net]

Hi all,

Ok this might sound odd, but for some reason I am not able to dynamically attach select2() on selects that are being added to page later, after uses presses a button to add more selects..

I've been using jquery's .on() event with no problems before, but with selects I guess there is sowething different, idk.

This is my code:

$(document).on('focus','select[rel=multiselect]',function(event){
$(this).select2();
});

What it does is - select2 activates on <select>s ONLY after I click on that select element, initially they are just plain selects. And after I click on a select, it first show me a regular plain select with options, and then makes it a select2 select..

Any ideas?

[m...@turkmenweb.net]

IN SHORT: How to apply .select2() to all future added select elements on a page?

[Igor Vaynberg]

this is more of a jquery/dom question. i would imagine you would add a
listener that listens to some kind of dom node added element and use
that to init select2.

-igor

> --
> You received this message because you are subscribed to the Google Groups "select2" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
> To post to this group, send email to sel...@googlegroups.com.
> Visit this group at http://groups.google.com/group/select2?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[m...@turkmenweb.net]

Thanks Igor for your reply.

You are right, it is more of a jQuery specific question. But the thing is that jQuery's event delagation function .on() doesn't want to work properly with .select2() .. it works with everything else fine, when adding elements on the fly .on() works for other libraries.. For some reason it doesn't work for .select2()

I thought this 'd be the best place to ask for help, as I am sure someone out there had fell into a similar situation when .seelct2() was added to dynamically created elements, and not only to elements that were present on the page in the first place, were in initial DOM.

[Igor Vaynberg]

$(document).on("DOMNodeInsertedIntoDocument", function(e) {...})

-igor

[m...@turkmenweb.net]

DOMNodeInsertedIntoDocument didn't work.

[Gustavo A. Gómez Cal Oncológicos]

<div class="float-left col-sm-3"> <select class="form-control" id="parentesco" name="parentesco[]" required></select></div>
<script>
      $('#parentesco*').select2({
        placeholder: 'Seleccionar paciente',
        ajax: {
          url: 'ajax_paciente.php',
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results: data
            };
          },
          cache: true
        }
      });
     
</script>