Jquery find element using data attribute of the parent

Question

I have two same ids but in different divs and I am trying to create a click event

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

I have created a onclick event like this

this._toolbox._container.on('click', "[id = 'first point']", function (ev) {
}

But this is listening to all the ids with 'first point'.

How can I create a click event only when 'first point' inside data-group="points" is clicked

Any suggestions or help would be appreciated.

See [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — showdev, Mar 21 '19 at 04:47
The whole meaning of Id is to be unique identification. Which means no two elements in the same rendered dom can have same ids — Krishna Prashatt, Mar 21 '19 at 04:47

Maheer Ali · Answer 1 · 2019-03-21T04:54:14.483

First problem is that id should be unique in whole document. Two elements shouldn't have same id. You should use class for that.You can use [data-group=points] before the selector.
You don't need to select id or class using attribute selector. Just use # for id and . for 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>

Pranav C Balan · Accepted Answer · 2019-03-21T05:23:10.467

You can use the same 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>

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

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>

Script :

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>

score 0 · Answer 3 · answered Mar 21 '19 at 06:21

You can try this code here: The $(el).click() not work when you add a dynamic element or contents. so you can choose any one solutions.

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

= = = Thank you = = =

Jquery find element using data attribute of the parent

3 Answers3