CODEWITHSUNDEEP
javascriptjquery
MadeInDreams
MadeInDreams

Reputation: 2126

Jquery child element on change

I am trying, using jquery, to trigger an event when a child element, in this case select, changes.

Here is my 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>

The javaScript that is not working yet:

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

OR 

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

Both method are not working

What is wrong with this?

Upvotes: 3

Views: 14185

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

This is not working because, addForm is a class not an id.

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

use .classSelector instead of an #id selector.

Also I missed out pointing another one error. That is, select is not a direct child of .addForm it is a descendant. Use descendant selector instead of a child selecor.

DEMO

Upvotes: 7

Related Questions