jQuery on change don't return attribute value

Question

Have problem to display select on change attribute id.

PHP:

<form action="" class="form-inline">
    <div class="form-group">
        <select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
            <option value=""></option>
            FOREACH
        </select>
    </div>
    <div class="form-group">
        <fieldset disabled>
            <select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
                <option value="" disabled selected>Select Subcategory</option>
            </select>
        </fieldset>
    </div>
    <div class="form-group">
        <td><input type="text" name="gramai" class="form-control" value=""></td>
    </div>
    <div class="form-group" id="kalb">
        <input type='text' name='1[]' value="-" disabled>
        <input type='text' name='12[]' value="-" disabled>
        <input type='text' name='123[]' value="-" disabled>
        <input type='text' name='1234[]' value="-" disabled>
    </div>
</form>

My jquery code:

$("select").on('change', function() {
    var status = $('select').attr('id');
    alert(status); 
});

var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;

$("#add").click(function () {
    categoryId = categoryId + 1;
    category = category + 1;
    product = product + 1;
    disableId = disableId + 1;

    $("#item").append('<div class="col-xs-12"><form action="" 
        class="form-inline"><div class="form-group"><select name="kategorijos" 
        **....... same code as above (php)**
    });

When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?

Where is the HTML element with the id "#add" you are selecting? — Edvaldo Silva de Almeida Jr
– Edvaldo Silva de Almeida Jr, Commented Apr 5, 2016 at 17:59

Ibrahim Khan · Accepted Answer · 2016-04-05 17:55:45Z

2

You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.

$(document).on('change', 'select', function() {
    var status = $(this).attr('id');
    alert(status); 
});

answered Apr 5, 2016 at 17:55

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery on change don't return attribute value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related