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

Question

我有 Bootstrap Table，其中每一行都包含一个编辑按钮。我使用数据格式化程序通过单击时可以提取的数据属性来传递记录的 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()，但这也不起作用，我还尝试将 jobid 的大小写更改为 jobId，过去我不确定是什么导致了这个问题。

Answer 1

您的问题是因为 clicked 是一个没有 dataset 属性的 jQuery 对象。

要解决此问题，您需要使用原生元素参考：

var id = e.target.dataset.jobid;

或者，使用 jQuery 对象的 data() 方法：

var id = clicked.data('jobid');

Answer 2

而不是使用 dataset，您可以使用 jquery 的 .data() 方法直接获取 jobid，就像 below.you 正在获取数据集的未定义值一样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>

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

Unable to extract text from data attribute

javascript

jquery

bootstrap-table