我有两个相同的ID,但在不同的div中,我正在尝试创建一个点击事件
<div data-group = "points">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li id="first point"></li>
</ul>
</div>
</div>
我已经创建了一个像这样的onclick事件
this._toolbox._container.on('click', "[id = 'first point']", function (ev) {
}
但这正在监听所有带有“第一点”的ID。
仅当单击data-group =“ points”内的“第一个点”时,才能创建点击事件
任何建议或帮助将不胜感激。
答案 0 :(得分:3)
第一个问题是 id
在整个文档中应该是唯一的。两个元素不应具有相同的id
。为此,您应该使用class
。可以在选择器之前使用[data-group=points]
。
您无需使用属性选择器选择id
或class
。只需将#
使用id
,将.
使用class
$('[data-group=points] .first-point').click(function(){
console.log("I am clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>
答案 1 :(得分:2)
您可以将attribute equals selector与descendant selector一起使用。
this._toolbox._container.on('click', '[data-group="points"] [id="first point"]', function (ev) {
});
$(document).on('click', '[data-group = "zone"] [id ="first point"]', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li id="first point">1</li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li id="first point">2</li>
</ul>
</div>
</div>
来自MDN docs:
id全局属性定义唯一标识符(ID) ,该标识符在整个文档中必须是唯一的 。其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时识别元素。
id的值 不得包含空格(空格,制表符等) 。浏览器将包含空格的不合格ID视为空白,作为该ID的一部分。与允许使用空格分隔值的class属性相反,元素只能具有一个ID。
id
在上下文中应该是唯一的,因此对于一组元素始终使用class
而不是id
。 p>
HTML:
<div data-group = "points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
脚本:
this._toolbox._container.on('click', '[data-group="points"] .first_point', function (ev) {
});
$(document).on('click', '[data-group="points"] .first_point', function(ev) {
console.log('clicked');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group="points">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
<div data-group="zone">
<div>
<ul>
<li class="first_point"></li>
</ul>
</div>
</div>
答案 2 :(得分:0)
您可以在此处尝试以下代码:添加动态元素或内容时,$(el).click()不起作用。因此您可以选择任何一种解决方案。
$(document).on('click','[data-group="points"] li',function(){
console.log("you are points datagroup clicked");
});
$(document).on('click','[data-group="zone"] li',function(){
console.log("you are points zone clicked");
});
//or
$(document).on('click','[data-group] li',function(){
if( $(this).parents('[data-group="points"]') ){ // check group item parent type
console.log(" points datagroup clicked");
}
else if( $(this).parents('[data-group="zone"]') ){ // check group item parent type
console.log("points zone clicked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
<div>
<ul>
<li class="first-point">one</li>
</ul>
</div>
</div>
<div data-group = "zone">
<div>
<ul>
<li class="first-point">two</li>
</ul>
</div>
</div>
= = = 谢谢 = = =