Select2不适用于JS生成的元素[重复]

Question

我在我的项目中使用Select2。我的问题是select2:selectevent 不适用于 JS 生成的元素。

我已经创建了这个 sn-p，所以你可以测试我说的话。

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>

您可以在小提琴中看到带有id="in-9" 的HTML 元素是在HTML 中创建的，但是当单击Append to Body 时会调用一个Javascript 函数，并且生成的元素无法像第一个那样触发select2:select 事件.

所以我的问题是，如何在动态生成的元素上调用select2:select 事件？

Answer 1

你可以使用jQuery的on()方法！

.on() 方法将事件处理程序附加到当前选定的集合 jQuery 对象中的元素或动态生成的元素

你可以试试这个：

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

看看下面的sn-p：

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>

希望对你有帮助！