父 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。 所以我想提醒孩子ID。 我知道我可以使用 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>

---

或者，如果需要，或者如果元素不是动态生成的，则使用事件委托将事件处理程序绑定到 select 标记。

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

Answer 2

 $('select.select').on('change', function(event) { alert($(this).attr('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" class='select'> <option>1</option> <option>1</option> <option>1</option> <option>1</option> <option>1</option> </select> <select id="child2" class='select'> <option>1</option> <option>1</option> <option>1</option> <option>1</option> <option>1</option> <option>1</option> </select> </div>

1. 而不是使用 parent element ，因为您知道您将使用 select 将其用作选择器。
2. 您还可以将类添加到选择然后将其用作选择器

Answer 3

为什么你不使用类来选择和编写js onchange这个类，alert($(this).attr('id'))

Answer 4

你只需要使用 like $('.parentclass select') 。 这会让你改变下拉id

 $('.parentclass select').on('change', 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>option child1 1</option> <option>option child1 2</option> </select> <select id="child2"> <option>option child2 </option> <option>option child2 1</option> </select> </div>