Select2 not working on generated elements by JS

Question

I am using Select2 in my project. My issue is that select2:selectevent is not working on generated elements by JS.

I have created this snippet so you can test what I say.

var i = 0,
  data = [
     { 
       id: 0, 
        text: 'Bob' 
      },
      { 
       id: 1, 
        text: 'Martin' 
      },
      { 
       id: 2, 
        text: 'John' 
      }
  ];
    $('#in-9').select2({
     data: data
    });
    
    // Button click event
$('#append').on('click', function () {
 var html = '<p><label for="in-' + i + '">Select2 #' + i + ':</label><br><input id="in-' + i + '" class="in"><br></p>';
  
  // Append HTML to Body
 $('body').append(html);
  
  // Assign data to input
  $('#in-' + i).select2({
   data: data
  });
  
  // Increase counter
  i++;
 
});

// Trigger "select" on select2 only works in first element.
$('.in').on('select2:select', function() {
 alert('wii');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<button id="append">Append to Body</button>

<!-- First element -->
<p>
  <label for="in-9'">Select2 #9:</label><br>
  <input id="in-9" class="in"><br>
</p>

You can see in the fiddle the HTML element with id="in-9" is created in the HTML but when clicking on Append to Body a Javascript function is called and the generated elements can't trigger the select2:select event like the first one.

So my question is, how I can call the select2:select event on the dynamically generated elements?

@ZakariaAcharki and @DavidR, actually this is not duplicated because in that post he asks to initialize the dynamically generated elements, I am asking to trigger the `select2:select` event on them. — Maramal, Nov 14 '16 at 14:47

Saumya Rastogi · Accepted Answer · 2016-11-14T14:44:29.393

You can use jQuery's on() method!

The .on() method attaches event handlers to the currently selected set of elements or dynamically generated elements in the jQuery object

You can try this:

$('body').on('select2:select', '.in', function() {
    alert('wii');
});

Have a look at the snippet below:

var i = 0,
  data = [
     { 
       id: 0, 
        text: 'Bob' 
      },
      { 
       id: 1, 
        text: 'Martin' 
      },
      { 
       id: 2, 
        text: 'John' 
      }
  ];
    $('#in-9').select2({
     data: data
    });
    
    // Button click event
$('#append').on('click', function () {
 var html = '<p><label for="in-' + i + '">Select2 #' + i + ':</label><br><input id="in-' + i + '" class="in"><br></p>';
  
  // Append HTML to Body
 $('body').append(html);
  
  // Assign data to input
  $('#in-' + i).select2({
   data: data
  });
  
  // Increase counter
  i++;
 
});

// Trigger "select" on select2 only works in first element.
$('body').on('select2:select', '.in', function() {
 alert('wii');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<button id="append">Append to Body</button>

<!-- First element -->
<p>
  <label for="in-9'">Select2 #9:</label><br>
  <input id="in-9" class="in"><br>
</p>

Hope it helps!

What should he put in the callback function? Maybe something like `$('#in-' + i).select2();`? — Cameron Hurd, Nov 14 '16 at 14:37
It worked, thank you. I thought I already tried something like that but it seems I didn't. — Maramal, Nov 14 '16 at 14:53

Select2 not working on generated elements by JS

1 Answers1