Jquery 子元素更改

Jquery child element on change

本文关键字：元素 Jquery 更新时间：2023-09-26

我正在尝试使用 jquery 在子元素（在本例中为 select ）更改时触发事件。

这是我的 HTML：

<div id="addForm" ng-repeat="forme in formes" class="row addForm">
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
        <select id="geo_{{forme.id}}" ng-model="forme.geo" class="form-control">
            <option value="rectangle">Rectangle</option>
            <option value="triangle">Triangle rectangle</option>
            <option value="cercle">cercle</option>
        </select>
    </div>
</div>

尚未工作的 javaScript：

$(document).ready(function () {
    $(document.body).on("change", "#addForm > select", function () {
        alert(this.value);
    });
});

或

$(document).ready(function () {
    $(document.body).on("change", ".addForm > select", function () {
        alert(this.value);
    });
});

两种方法都不起作用

这有什么问题？

这是

行不通的，因为addForm是class而不是id。

$(document).on("change", ".addForm select", function () {
   alert(this.value);    
});

使用.classSelector而不是#id选择器。

我也错过了指出另一个错误。也就是说，select不是.addForm的直系后代。使用 descendant selector 而不是 child selecor 。

Jquery 子元素更改

Jquery child element on change

演示