Question

所以我有一个像下面这样的div：

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

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

$('.parentclass').on('change', function() { 
    alert(this.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>

如果需要，可以使用event delegation将事件处理程序绑定到select标记，如果元素不是动态生成的，则直接将事件处理程序绑定到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>

不使用父元素，因为您知道您将使用select将其用作选择器。
您还可以将类添加到select中，然后将其用作选择器

Answer 3

为什么不使用class来选择和写js onchange这个类，警告（$（this）.attr（＆＃39; id＆＃39;））

Answer 4

你必须像$('.parentclass select')一样使用。这会让你更改下拉id

＆＃13;

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

＆＃13;

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

＆＃13;

父div事件处理程序订阅类

4 个答案: