Question

我有以下代码：

function openCanviewer() {
    var cid = $(this).data('cid');
    alert(cid);
}

HTML：

<div onclick="openCanviewer();" data-cid="ID OF CAN FROM DATABASE"></div>

我的问题是，当我点击带有onclick功能的元素时，因为它们是从数据库中插入的，所以我有许多因为它们已经显示了＃34; undefined＆＃34;而不是data-cid属性的内容。有人知道我做错了什么，或者我在这里缺少什么？

Answer 1

要捕获确切的元素，请从元素的点击事件处理程序中传递this

function openCanviewer(element) {
    var cid = $(element).data('cid');
    alert(cid);
}


<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE"></div>
                       ^^^ you have a typo here

片段

＆＃13;

function openCanviewer(element) {
  var cid = $(element).data('cid');
  alert(cid);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE">Click</div>

＆＃13;

Answer 2

$('#mi').click(function() {
  var cid = $(this).data('cid');
  alert(cid);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mi" data-cid="ID OF CAN FROM DATABASE">hello</div>

Answer 3

一般情况下，您不应该使用onclick="openCanviewer();"之类的内联事件，您应该始终将js，css和html分开。

对于您的问题，您可以使用委托事件监听：

function openCanviewer() {
  var cid = $(this).data('cid');
  alert(cid);
}

$(document).on('click', '[data-cid]', openCanviewer)

如果有许多具有相同功能的div，如何使用函数调用div的属性值？

3 个答案: