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);
    });
});

两种方法都不起作用。

这是怎么了？

- MadeInDreams

Answer 1

这不起作用是因为addForm是一个class而不是一个id。

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

使用.classSelector替代#id选择器。

另外，我错过了指出另一个错误。即select不是.addForm的直接子元素，而是后代元素。使用后代选择器替代子选择器。

演示

- Rajaprabhu Aravindasamy

---

这个类是存在的，因为我也在测试classSelector。它们两个都不起作用。唯一让我成功的方法是手动将选择元素的ID传递给jQuery，但这对我来说不好，因为它们是使用AngularJS添加的对象。 - MadeInDreams

@MadeInDreams，你现在可以检查一下演示和我的答案吗？ - Rajaprabhu Aravindasamy

是的，这个可以工作。谢谢你。你能告诉我为什么在这种情况下需要删除“：”或“>”吗？而且它也可以使用id选择器工作。 - MadeInDreams

@MadeInDreams > 会选择直接子元素，而空格（后代选择器）会选择包括直接子元素在内的后代元素。 - Rajaprabhu Aravindasamy

我明白了。非常感谢！ - MadeInDreams