Question

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

我已创建此代码段，因此您可以测试我说的内容。

＆＃13;

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');
});

＆＃13;

<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>

＆＃13;

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

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

Answer 1

您可以使用jQuery＆＃39; on()方法！

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

你可以试试这个：

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

请看下面的代码段：

＆＃13;

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');
});

＆＃13;

<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>

＆＃13;

希望它有所帮助！

Select2没有使用JS生成的元素

1 个答案: