jQuery使用父级的data属性查找元素

Question

我有两个相同的ID，但在不同的div中，我正在尝试创建一个click事件

<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”内的“第一个点”时，才能创建单击事件

任何建议或帮助，将不胜感激。

Answer 1

第一个问题是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> 

Answer 2

您可以将相同的属性equals选择器与后代选择 器一起使用。

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文档 ：

id全局属性定义一个唯一标识符（ID） ，该标识符在整个文档中必须是唯一的 。 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

id的值不能包含空格（空格，制表符等） 。 浏览器将包含空格的不合格ID视为空白，作为该ID的一部分。 与允许使用空格分隔值的class属性相反，元素只能具有一个ID。

---

仅供参考： id在上下文中应该是唯一的，因此对于一组元素，请始终使用class而不是id 。

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> 

剧本：

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

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

Answer 3

您可以在此处尝试以下代码：添加动态元素或内容时，$（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> 

= = = 谢谢 = = =