Javascript $（this）.val（）返回不正确的值IE8

我有一个由一些javascript代码动态生成的琐事页面。它在大多数浏览器（Chrome、Safari、Firefox、Opera、IE9）中运行良好，但在IE8中却有一个奇怪的问题。当我调用$（this）.val（）作为按钮单击事件处理程序的一部分时，我得到一个空字符串作为响应，即使单击的按钮有一个值

相关JavaScript:

$(document).ready(function() {
    $(document).on("click", ".btn", function() {
        if(panel % numPanels === 1)
            {category = $(this).val();}
        nextPanel(prop);
    });
});

<div id="buttons">
<button type="button" class="btn" value="One">Group One</button>
<button type="button" class="btn" value="Two">Group Two</button>
<button type="button" class="btn" value="Three">Group Three</button>
</div>

相关HTML:

$(document).ready(function() {
    $(document).on("click", ".btn", function() {
        if(panel % numPanels === 1)
            {category = $(this).val();}
        nextPanel(prop);
    });
});

<div id="buttons">
<button type="button" class="btn" value="One">Group One</button>
<button type="button" class="btn" value="Two">Group Two</button>
<button type="button" class="btn" value="Three">Group Three</button>
</div>

第一组
第二组
第三组

知道怎么回事吗

---

编辑：我使用的是jQuery 1.7.2，使用的是

console.log（$（this）.attr（“value”）

和

console.log（$（this）.prop（“value”）

也返回一个空字符串。

尝试使用

.attr

编辑：添加完整代码

$(document).ready(function() {     
$(document).on("click", ".btn", function() {
     if(panel % numPanels === 1)
// retrieve using attr
         {category = $(this).attr("value");}
     nextPanel(prop);
 }); 
}); 

您可以尝试

$（this）.attr（“value”）

或

您可以使用

$（this.prop（“value”）

.prop（）所需的jQuery 1.6+版本

如果要使用javascript，那么我的建议是使用html-data属性：

<div id="buttons">
    <button type="button" class="btn" data-value="One">Group One</button>
    <button type="button" class="btn" data-value="Two">Group Two</button>
    <button type="button" class="btn" data-value="Three">Group Three</button>
</div>

---

你用的是ready handler吗？还有一些其他东西可能是问题所在。如何验证返回空字符串的是

.val（）

？是的，它位于就绪处理程序下。至于.val（），我在赋值前后直接使用断点检查了category的值，它从未定义更改为“”。如果执行

console.log（$（this）.attr（“value”）

，在其中单击handler？哪个版本的jQuery？