Jquery найти элемент, используя атрибут данных родителя

Question

У меня есть два одинаковых идентификатора, но в разных 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) {
}

Но это прослушивание всех идентификаторов с «первой точкой».

Как создать событие щелчка, только когда нажата «первая точка» внутри группы данных = «точки»

Любые предложения или помощь будут оценены.

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

Вы можете использовать тот же атрибут , равный селектору , с селектором потомка .

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

значение идентификатора не должно содержать пробелов (пробелы, табуляции и т. Д.).Браузеры обрабатывают несоответствующие идентификаторы, которые содержат пробелы, как если бы пробел был частью идентификатора.В отличие от атрибута класса, который допускает значения, разделенные пробелами, элементы могут иметь только один идентификатор.

---

FYI: The 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 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>

= = = Спасибо = = =