Onclick获取元素id结果undefined jquery

时间:2015-06-15 13:14:23

标签: javascript php jquery html

我知道这将标记为重复..但我已经尝试查找其他帖子,即使我问谷歌先生,但我完全混淆..我尝试使用帖子上的每个样本但似乎并非全部工作..

我想要存档的是..当我点击按钮时,jquery将在警告弹出窗口中显示按钮ID。但我总是得到结果未定义。

这是我的示例代码

PHP

<button class="myButton" name="testResultByName" data-value="testResultByDataValue" id="testResultByID">Click</button>

JQUERY,我在关闭正文</body>标记之前将此代码放在正确的位置,并且在关闭标题</head>标记之前已经在右上方尝试

<script type="text/javascript">
$('.myButton').click(function(event){
        var myButtonVar = $(this).prop('data-value');

        alert(myButtonVar);
        event.preventDefault();
});
</script>

我已经尝试使用

$(this).prop('id');
$(this).prop('name');
$('.myButton').attr('data-value');
$('.myButton').attr('id');
$('.myButton').attr('name');

什么都行不通..但如果我使用下面的课程就可以了......

$('.myButton').prop('class');

然后警告显示类名“myButton”似乎工作..我已经使用外部jquery文件..但没有任何工作..已经使用ready()但结果仍然相同..

我错过了什么吗?哦,我使用jquery-1.11.3.js

3 个答案:

答案 0 :(得分:2)

$.data代替.prop,就像这样

$('.myButton').click(function(event){
    var myButtonVar = $(this).data('value');
    var buttonId = $(this).attr('id');

    console.log(myButtonVar);
    console.log(buttonId);
});

Example

答案 1 :(得分:0)

您从attr()获得值。

请参阅相同

的示例代码

$(document).ready(function(){
    $('.myButton').click(function(event){
        
        var myButtonVar = $(this).attr('data-value');
        alert("data-value = "+myButtonVar);
        
        myButtonVar = $(this).attr('id');
        alert("id = "+myButtonVar);
        
        myButtonVar = $(this).attr('name');
        alert("name = "+myButtonVar);
        
        myButtonVar = $(this).attr('class');
        alert("class = "+myButtonVar);
                
        
        event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="myButton" name="testResultByName" data-value="testResultByDataValue" id="testResultByID">Deposit</button>

答案 2 :(得分:0)

试试这个:

$('.myButton').on('click', function(){
    var btnValue = $(this).attr('data-value');
    alert(btnValue);
    return false;
});