在使用JQuery加载的元素上执行Select2

Question

I'm using select2 on a project, and is working as it should, initiating the select2 using:

$(function() {
  $(".elegible").select2();
});

The issue comes in when I'm trying to call de function to elements loaded by JQuery, I don't know how to call that function. I've tried "on" but it does not load the selects with the select2. The only thing I found is this:

$(document).ajaxComplete(function(e, xhr, settings){
    $(".elegible").select2();
});

But this calls that function every time an ajax call is completed, even in those cases when I'm not needing the select2. My question is: How can I call the select to on elements loaded later? Is the method that I'm using right now valid? Can I improve that?

Thanks!

Adding Info: I call the new content by getting it from another page - which loads the select - using ajax:

$.get('detalle_miembro/' + this.id)
  .done(function(result) {
    $('#detalle_miembro').html(result);
  });

And placing it, in a div: <div id="detalle_miembro"></div>

Answer 1

Here is how you can call select on just the new content added :

$.get('detalle_miembro/' + this.id).done(function(result) {
    $('#detalle_miembro').html(result).find(".elegible").select2();
});