Question

所以我有ColdFusion后端渲染的html，动态创建的，具有id以及onClick属性的标签...但是，在JavaScript中，当我尝试console.log（event）时，它在检查窗口时返回undefined，包括id和value在内的所有内容。您是否知道发生任何原因的原因？非常感谢。

这是我的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

使用动态创建的Javascript，您需要考虑事件委托。如果使用JQuery则看起来像

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

Answer 2

首先，我们不应该在选项标签中使用onClick事件。而且，如果在Select标记中使用onClick事件，它将调用一个方法两次，而不是一次。因此最好在select标签中使用onChange事件。

请验证以下代码，这将有助于解决您的问题。

我的示例代码

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>

为什么JavaScript无法从onClick函数捕获事件？

2 个答案: