javascript - Select2 不适用于 JS 生成的元素

Question

这个问题已经有答案了:

Initialising select2 created dynamically (7 个回答)

已关闭 6 年前。

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

我创建了这个片段，以便您可以测试我所说的内容。

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>

您可以在 fiddle 中看到带有 id="in-9" 的 HTML 元素在 HTML 中创建，但是当单击 Append to Body 时调用 Javascript 函数且生成的元素无法触发 select2:select与第一个类似的事件。

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

Answer 1

您可以使用 jQuery 的 on()方法!

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

你可以试试这个:

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

看看下面的代码片段:

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>

希望对你有帮助!