javascript - 无法从数据属性中提取文本

Question

我有一个 Bootstrap 表，每行都有一个编辑按钮。我使用数据格式化程序通过单击时可以提取的数据属性来传递记录的 id。当我检查控制台中的元素时，我可以看到 ID 在数据集属性中，但是当我尝试使用 element.dataset 将其取出时，控制台包含一个错误，告诉我数据集未定义。这令人沮丧，因为我可以看到它就在那里!

这是我的点击事件:

$(".job-edit").click(function(event) {
    var editModal = $("#jobEditModal");
    var clicked = $(event.target);
    var id = clicked.dataset.jobid;
    console.log(id);
    event.stopPropagation();
    //editModal.modal(); 
});

以及设置按钮的格式化程序:

job.editFormatter = function (value) {
    return "<button class='btn job-edit text-center' data-jobId='" + value + "'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit</button>";
}

到目前为止，我已经尝试将 .dataset 替换为 .getAttribute()，但这也没有用，我还尝试过更改 的大小写code>jobid 到 jobId，我不确定是什么导致了这个问题。

Answer 1

而不是使用 dataset 你可以通过使用 jquery 的 .data() 方法直接获取 jobid 如下所示。你正在得到未定义数据集的值，因为 clicked 变量是一个 jquery 对象，它没有 dataset

的定义

$(".job-edit").click(function(event) {
    var editModal = $("#jobEditModal");
    var id = $(this).data("jobid");
    console.log(id);
    event.stopPropagation();
    //editModal.modal(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn job-edit text-center' data-jobId='2'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit</button>