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

Question

我有两个相同的 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) {
}

但这是监听所有带'first point'的id。

如何仅在单击 data-group="points" 中的 'first point' 时创建单击事件

如有任何建议或帮助，我们将不胜感激。

Answer 1

您可以使用相同的 attribute equals selector with the 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:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single 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>

脚本：

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 for that.You可以在select或
之前使用[data-group=points] 您不需要 select id 或 class 使用属性 selector。只需对 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>

= = = 谢谢 = = =

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

Jquery find element using data attribute of the parent

javascript

jquery

onclick

onclicklistener

jquery-events