Question

我有几个带有数据属性的动态创建的<div>，我将它们附加到另一个<div>上，如下所示：

var jobtypehtml = "";

for (var i = 0; i < arrayLength; i++) {

    jobtypehtml += `<div class="jobtypeselect" data-jobtypechecked="0" onClick="check()"></div>`;

}

$('#jobtype').append(jobtypehtml);

点击<div>时，将调用如下所示的检查功能：

function check(){

    alert($(this).getAttribute('data-jobtypechecked'));

}

如您所见，我想获取被点击的<div>的数据属性。我看到了.call和.apply的一些解决方案，但是对我来说，这似乎很复杂。有没有更简单的方法来实现这一目标？

编辑：

function check(){

    alert($(this).data('jobtypechecked'));

}

以上功能提示“未定义”。

Answer 1

您可以像这样将this传递到呼叫站点的点击功能中：

var jobtypehtml = "";

for (var i = 0; i < arrayLength; i++) {

    jobtypehtml += `<div class="jobtypeselect" data-jobtypechecked="0" onClick="check(this)"></div>`;

}

$('#jobtype').append(jobtypehtml);


function check(elm){

    alert($(elm).getAttribute('data-jobtypechecked'));

}

Answer 2

我建议您event-delegation使用动态创建的元素。

$('#jobtype').on('click', '.jobtypeselect', check);

var jobtypehtml = "";
for (var i = 0; i < 10; i++) {
  jobtypehtml += `<div class="jobtypeselect" data-jobtypechecked="${i}">Ele from Stack</div>`;
}

$('#jobtype').append(jobtypehtml);

function check() {
  console.log($(this).data('jobtypechecked'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="jobtype"></div>

Answer 3

如上所述，$ .data应该可以解决您的问题。我为您准备了一个workind代码段：

var jobtypehtml = "";

for (var i = 0; i < 3; i++) {
    jobtypehtml += '<div class="jobtypeselect" data-jobtypechecked="'+i+'"></div>';
}

$(document).on('click', '.jobtypeselect', function(){
	console.log('Div clicked:' + 	$(this).data('jobtypechecked'));
});

$('#jobtype').append(jobtypehtml);

.jobtypeselect {
	width: 100px;
  height: 20px;
	border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='jobtype'>

</div>

Answer 4

尝试一下：

$('.jobtypeselect').on ("click", function(e) {
   alert ($(this).data("jobtypechecked"));
});

或：

$(document).on ("click", ".jobtypeselect", function(e) {
   alert ($(this).data("jobtypechecked"));
});

如果您只想使用jQuery并从标记中删除onClick =“ check（）”。

将选择器$（this）传递给函数的简单方法

4 个答案: