Question

我试图按按钮点击获取DataId，DataType，DataType这3个自定义属性值。我已经将jquery编码为bellow，但这根本不起作用。有什么想法解决它吗？

表：

<table class="table table-bordered">
    <thead>
        <tr>
            <th>P Status</th>
            <th>P Sub Status</th>
            <th>T Lead</th>
            <th>P Status Order</th>
            <th>P Sub Status Order</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>In Process - ASPN</td>
                <td>
                    Benefits Verification 
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" DataId="1" DataType="ProgramSubstatus" DataValue="Benefits Verification " style="float:right;margin-left:5px;">Edit</button>
            </td>
            <td>
                Jelsa Nichols
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" DataId="1" DataType="TeamLead" style="float:right;margin-left:5px;">Edit</button>
        </td>
        <td>0</td>
        <td>0</td>
    </tr>
    </tbody>
</table>

Jquery的：

<script>

    $(document).ready(function () {

        $("button").on("click", "button", function () {
            var DataId = $(this).attr("DataId");
            var DataType = $(this).attr("DataType");
            var DataValue = $(this).attr("DataValue");

            console.log(DataId);
            console.log(DataType);
            console.log(DataType);
        });

    });

</script>

Answer 1

您已引用button选择器两次 -

$("button").on("click", "button", function () {})
//---^here-----------------^here---

这意味着您实际上正在向{{1>} } click（后代）内的任何button添加button事件处理程序。由于HTML中的按钮中没有按钮，因此您无法捕获该事件被触发。

要解决此问题，您需要删除button的内部引用。那会让你看起来像这样 -

$("button").on("click", function () {})

在the documentation for the on function中，它提到第二个参数是一个选择器（强调已添加） -

.on( events [, selector ] [, data ], handler )

selector
  类型：字符串
  一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。

此外，我建议您查看使用data-*属性的推荐方法。您不需要像访问普通属性那样访问它们。请花一点时间阅读文档的这一页 - https://api.jquery.com/data/

作为一个例子（从链接的文档中取消） -

<div  
   data-role="page" 
   data-last-value="43" 
   data-hidden="true" 
   data-options='{"name":"John"}'>
</div>

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

Answer 2

更改按钮以记录它将正常工作

$(document).ready(function () {

    $(document).on("click", "button", function () {
        var DataId = $(this).attr("DataId");
        var DataType = $(this).attr("DataType");
        var DataValue = $(this).attr("DataValue");

        console.log(DataId);
        console.log(DataType);
        console.log(DataType);
    });

});

Answer 3

试试这个

 $("button").on("click", function () {
// do stuff
})

你只需要一次按钮选择器。

单击时获取多个自定义attr值

3 个答案: