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

时间:2019-03-21 04:43:22

标签: javascript jquery onclick onclicklistener jquery-events

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

但这正在监听所有带有“第一点”的ID。

仅当单击data-group =“ points”内的“第一个点”时,才能创建点击事件

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

3 个答案:

答案 0 :(得分:3)

第一个问题是 id在整个文档中应该是唯一的。两个元素不应具有相同的id。为此,您应该使用class。可以在选择器之前使用[data-group=points]
您无需使用属性选择器选择idclass。只需将#使用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>

答案 1 :(得分:2)

您可以将attribute equals selectordescendant 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: id在上下文中应该是唯一的,因此对于一组元素始终使用class而不是id。 p>

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>

答案 2 :(得分:0)

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

= = = 谢谢 = = =