The .on('click') jquery event doesn't work on a dinamyc list box : I'd like to know why, and how to solve it, when I click on an option of my multiple list box...

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

doesn't work

Here is my html code

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

When that list box is filled with some dynamic data obtained from ajax like this

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

I'd like that when I click an option in my "boxAgents" list, pass it to another list box.
I try to pass the options this way

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

The funny thing is that my code only works if I remove the "`size=5`" from the select tag, it doesn't work if I use "`multiple=multiple`" neither. It only works if my "boxAgents" is a normal dropdown list.

What should I do?, thanks!.

