Jquery使用父级的数据属性查找元素

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”中的“first point”，我该如何创建点击事件

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

Answer 1

您可以使用与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。

---

FYI : The id should be unique in a context so always use class instead of id for a group of elements.

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>

Answer 2

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

= = =谢谢= = =