this.id 在页面重新加载后的 onchange 事件中未定义

Question

我有以下问题：

我有一个 HTML 元素（下拉列表），带有 onchange 事件，接受两个参数（id 和 value）。一切正常。除了一种情况。当我重新加载页面时，将触发此 onchange 事件，但未定义 id 和 value 参数。如果没有这两个参数，这个函数将不会做任何事情。

我正在使用 CakePHP，所以我是这样做的：

'size' => [
    'label'   => 'Test label',
    'type'    => 'select',
    'options' => [
        "1x1"         => 'Single',
        "2x1"         => 'Double'
    ],
    'help'    => 'Help text',
    'onchange' => 'change_viewport(this.id, this.value)'
]

还有一个这样开头的JS函数：

function change_viewport(id, value) {
    console.log(id);
    console.log(value);
}

有什么办法可以解决这个问题，以便我获得正确的 ID 和值吗？

我知道我可以通过调用 `setTimeout()' 和调用函数来解决这个问题，但问题是，我可以有多个部分有这个大小元素，我不知道哪个一个是正确的。

谢谢

编辑 1：HTML 下拉元素

这是 CakePHP 为上述大小定义输出的内容

<select name="data[PromotionActionInjectionBanner][0][size]" onchange="change_viewport(this.id, this.value)" class="PromotionActionInjectionBanner_size chzn-chosen span8 chzn-done" data-placeholder="Select an option" repeatit=" PromotionActionInjectionBanner_size PromotionActionInjectionBanner size 0 secondary" markedoptions="" id="PromotionActionInjectionBanner0Size" idtemplate="PromotionActionInjectionBanner0Size" nametemplate="data%5BPromotionActionInjectionBanner%5D%5B0%5D%5Bsize%5D" style="display: none;">
<option value="1x1" selected="selected">Single</option>
<option value="2x1">Double</option>
</select>

Answer 1

更改如下：

'size' => [
    'label'   => 'Test label',
    'type'    => 'select',
    'options' => [
        "1x1"         => 'Single',
        "2x1"         => 'Double'
    ],
    'help'    => 'Help text',
    'onchange' => 'change_viewport(this)'
]

并将 JS 函数更改为：

function change_viewport(e) {
    console.log(e.id);
    console.log(e.value);
}

它应该可以正常工作。我已经测试了以下代码片段，您可以运行在线查看：

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

function clicks(e){
    alert(e.id);alert(e.value);

}
</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<select  id ="id_name " onchange="clicks(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

</body>
</html>

this.id 在页面重新加载后的 onchange 事件中未定义

this.id is undefined in onchange event after page reload

javascript

events

cakephp

cakephp-2.0