.on('click') jquery 事件不适用于动态列表框

Question

当我单击多个列表框的选项时，我想知道为什么以及如何解决它......

$(document).on("click, id", function () { //some code });

不起作用

这是我的 html 代码

<div class="box">
<div class="input-group">
<div class="text-primary">
Select something
<select name="boxAgents" class="form-control" id="boxAgents" size="5">
</select>
</div>
</div>
</div>

当该列表框填充了一些从 ajax 获得的动态数据时，如下所示

$.each(res, function (index, item) {
var listAgents = item.agentName;    
$("#boxAgents").append('<option id="agent' + listAgents + '" value="' + listAgents + '">' + listAgents + '</option>');
});

当我单击"boxAgents"列表中的选项时，我希望将其传递给另一个列表框。 我尝试以这种方式传递选项

$(document).on("click", "option[id^='agent']", function () {
var id = $(this).attr("id").replace("agent", "");
$("#boxSelectedAgen").append('<option id="remove"' + id + ' value="' + id + '">' + id + '</option>');
});

有趣的是，我的代码只有在从 select 标签中删除"size=5"时才有效，如果我都不使用"multiple=multiple"，它不起作用。仅当我的"boxAgents"是普通下拉列表时，它才有效。

我该怎么办？

Answer 1

好吧，我做到了，我用另一种方法解决了它......我用了

$('#boxAgent').change(function(){ 
var value = $(this).val();
$("#boxSelectedAgen").append('<option id="remove"' + value + ' value="' + value + '">' + value + '</option>');
});

它将选项移动到另一个多个文本框。

谢谢大家的支持！