如何在父div事件处理程序订阅该类时获取子元素的id [英] How to get id of child element when parent div event handler subscribed to the class

问题描述

 < div class =parentclassid =parent> ; 
< select id =child1>< / select> 
< select id =child2>< / select> 
 ... 
< / div> 
  

然后我有以下事件处理程序：

< $（'。code> $（'。parentclass'）。on（'change'，function（）{
alert（this.id）;
}）;

当我更改子选项时，这会提醒父级的ID。所以我想提醒孩子身份证。我知道我可以使用jquery通配符，但有另一种方式吗？

感谢您提供任何帮助。

解决方案

从 事件 对象其中 <$ c

  event  对象作为回调的第一个参数。
 > $（'。parentclass'）。on（'change'，function（event）{
 alert（event.target.id）; 
}）; 
  

 <$ c'c> $（'。parentclass'）。on（'change'，function（event）{alert（event.target.id）;}）;  

< pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< / script>< div class =parentclassid =parent> < select id =child1> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> < /选择> < select id =child2> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> < / select>< / div>

b

---

或者使用事件代理

将事件处理程序绑定到select标记， a>（如果需要的话，或者直接如果元素不是动态生成的）。

  $（'。parentclass'）。on ，'select'，function（）{
 alert（this.id）; 
}）; $（'。parentclass select'）。on（'change'，function（）{
 alert（this.id）; 
 
 // or without event-delegation 
 b $ b}）; 
  

 <$ （'change'，'select'，function（）{alert（this.id）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js>< / script>< div class =parentclassid =parent> < select id =child1> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> < /选择> < select id =child2> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> <选项→1< /选项> < / select>< / div>  

So i have a div like the following:

<div class="parentclass" id="parent">
    <select id="child1"></select>
    <select id="child2"></select>
    ...
</div>

I then have the following event handler:

$('.parentclass').on('change', function() { 
    alert(this.id);
});

This is alerting the id of the parent when i change the child options. So i am trying to alert the child id. I know that i can use jquery wildcards but is there another way?

Thanks in advance for any help.

解决方案

Get target element from event object where event object can be accessed as the first argument of the callback.

$('.parentclass').on('change', function(event) { 
    alert(event.target.id);
});

$('.parentclass').on('change', function(event) {
  alert(event.target.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentclass" id="parent">
  <select id="child1">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>
  <select id="child2">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>
</div>

---

Or bind event handler to the select tag using event delegation if necessary or directly if elements are not generated dynamically.

$('.parentclass').on('change', 'select', function() { 
    alert(this.id);
});

// or without event-delegation
$('.parentclass select').on('change', function() { 
    alert(this.id);
});

$('.parentclass').on('change', 'select', function() {
  alert(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentclass" id="parent">
  <select id="child1">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>
  <select id="child2">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>
</div>

这篇关于如何在父div事件处理程序订阅该类时获取子元素的id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！