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

而不是使用dataset，您可以使用jobid jquery方法直接获取.data()，如下所示。由于clicked变量是dataset变量，因此您获取数据集的未定义值一个jquery对象，它没有$(".job-edit").click(function(event) { var editModal = $("#jobEditModal"); var id = $(this).data("jobid"); console.log(id); event.stopPropagation(); //editModal.modal(); });

的定义

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

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

要解决此问题，您需要使用本机元素引用：

var id = e.target.dataset.jobid;

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

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

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

2 个答案: