javascript - Jquery child element on change - Stack Overflow

admin管理员组

文章数量:1310891

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Mar 13, 2016 at 5:21 Ibrahim Khan 20.8k77 gold badges4545 silver badges5656 bronze badges asked Mar 13, 2016 at 5:11 MadeInDreamsMadeInDreams 2,14655 gold badges3434 silver badges6767 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptJquery child element on changeStack Overflow