jQuery子元素的变化

Question

我正在尝试使用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);
    });
});

两种方法都不起作用

这有什么问题？

Answer 1

这是不是因为工作，addForm是class不是id。

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

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

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

演示