Почему javascript не перехватывает событие от функции onClick?

Question

Итак, у меня есть html, отрисованный бэкэндом ColdFusion, динамически создаваемые теги, которые также имеют идентификатор onClick ... Однако в JavaScript, когда я пытаюсь console.log (событие), он возвращает неопределенное значение, когда я проверяю окно, все заполняется, включая идентификатор и значение. Вы знаете какую-либо причину, по которой это могло произойти? Был бы очень признателен.

Вот мой серверный скрипт ColdFusion

  PID==""?SelectedVal1='Selected':SelectedVal1='' 

  writeOutput('<OPTION value="" #SelectedVal1#>-- All Programs --</OPTION>');
  for (row in getPrograms) {
    listfind(pid,getPrograms.ProgramID)?SelectedVal2='Selected':SelectedVal2=''
    if (getPrograms.ProgramID!=18){
      writeOutput('<OPTION onClick="addProgramToList();" id="#getPrograms.ProgramShortName#" value="#getPrograms.ProgramID#" #SelectedVal2#>#getPrograms.ProgramShortName#</OPTION>');
    }
  }

Вот функция JS

addProgramToList = (event) => {
    //arrayOfPrograms.push(e);
    console.log(event)
  }

Answer 1

Прежде всего, мы не должны использовать событие onClick в теге option. И если вы используете событие onClick в теге Select, он будет вызывать метод дважды, а не один раз. Так что лучше использовать событие onChange в теге select.

Пожалуйста, проверьте код ниже, и это поможет решить вашу проблему.

Мой образец кода

addProgramToList = (event) => {
	console.log(event);
}

<select name="select" onclick="return addProgramToList(event);">
  <option value="">Select All</option>
  <option value="1">Bhagathsingh Sekar</option>
  <option value="2">Arun A</option>
  <option value="3">Nelson G Jayaraj</option>
</select>

Answer 2

С динамически созданным Javascript вы должны учитывать делегирование событий.При использовании JQuery это будет выглядеть примерно так:

$( "#someExistingElement" ).on( "click", "##targetElementID#", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});