.each仅适用于第一个选择框

Question

Basically, when trying to utilise the each function in jQuery I'm bumping into a problem which I can't seem to get past,

Here's the jQuery code I'm attempting to use :

$('#status_update').each(function(index) {
        alert(this);
        $(this).on('change', function (e) {
            alert('changed');
        });
});

Here's the HTML code I'm using :

<select name='status_update[]' class='input input-medium' id='status_update' data-id='1'>
    <option value='0' selected>Not Admitted</option>
    <option value='1'>Admitted</option>
</select>

<select name='status_update[]' class='input input-medium' id='status_update' data-id='1'>
    <option value='0' selected>Not Admitted</option>
    <option value='1'>Admitted</option>
</select>
<select name='status_update[]' class='input input-medium' id='status_update' data-id='1'>
    <option value='0' selected>Not Admitted</option>
    <option value='1'>Admitted</option>
</select>

etc....

It works for the first one, but after that it doesn't activate the on.change() in the jQuery which results in it not processing.

Answer 1

id should be unique in a document , you have multiple element with the same id.

You can use a common class for all the element and use the class selector instead of id selector

$('.status_update').each(function(index) {
        alert(this);
        $(this).on('change', function (e) {
            alert('changed');
        });
});

Answer 2

An ID should only be applied to a single element. Try using .input-medium as your jquery selector, ie:

$('.input-medium').each(function(index) {
    alert(this);
    $(this).on('change', function (e) {
        alert('changed');
    });
});

Answer 3

您不能为多个元素分配相同的ID，因此最好删除ID并使用类

Answer 4

If elements are dynamically generated, there are two workaround to this:

First: use jQuery live function [deprecated], use jQuery on instead

http://api.jquery.com/on/

Second: upon creation of the element, add the onchange with it. example:

val jQel = $("<select name='status_update[]' class='input input-medium' data-id='1'>
    <option value='0' selected>Not Admitted</option>
    <option value='1'>Admitted</option>
</select>");
$(jQel).find(".input").change(function(){
 //add code here
});
//then your append code somewhere

Answer 5

Try this

$('input[id="status_update"]').each(function(index) {
        alert(this);
        $(this).on('change', function (e) {
            alert('changed');
        });
});