javascript - 当父div事件处理程序订阅该类时如何获取子元素的id

Question

所以我有一个如下所示的 div:

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

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

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

当我更改子选项时，这会提醒父级的 ID。所以我试图提醒 child 的身份。我知道我可以使用 jquery 通配符，但是还有其他方法吗？

预先感谢您的帮助。

Answer 1

从 event 获取目标元素对象在哪里event对象可以作为回调的第一个参数来访问。

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

<小时/>

或者使用 event delegation 将事件处理程序绑定(bind)到选择标记如果需要，或者如果元素不是动态生成的，则直接生成。

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