Maramal Maramal - 22 days ago 8
HTML Question

Select2 not working on generated elements by JS

I am using Select2 in my project. My issue is that

select2:select
event 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?

Answer

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!