jQuery .bind doesn´t work for multiple selectors

Question

I have jQuery like this :

jqObj.bind('change', function () {
      debugger;
    });

jqObj matches two elements (dropDownList), but only the firs of them respond to the 'change' event, the second element that on position [1] do nothing on change.

This is my HTML :

<div id="area-146">
    <div class="blockContent">
        <div class="form-element duplicate ">
            <label for="71">Idioma </label>
            <select id="combo-71" style="width: 200px;">
                <option value="Russo">Russo</option>
                <option value="Sueco">Sueco</option>
            </select>
            <input id="text-71" value="Escolhe uma opção" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;">
            <br style="clear: left;">
        </div>     
        <div class="form-element duplicate ">
            <label for="72">Escrita </label>
            <input class="peq" id="72" maxlength="35" name="Input.Fields[72]" size="35" title="" type="text" value="">   
            <br style="clear: left;">
        </div>     
        <div class="form-element duplicate ">
            <label for="73">Conversação </label>
            <input class="peq" id="73" maxlength="35" name="Input.Fields[73]" size="35" title="" type="text" value=""> 
            <br style="clear: left;">
        </div>     
        <div class="form-element duplicate ">
            <label for="85"> </label>
            <br>
            <br style="clear: left;">
        </div>     
    </div>
    <div id="area-146-2"><div class="form-element duplicate ">
        <label for="71">Idioma </label>
        <select id="combo-71-2" style="width: 200px;">
            <option value="Russo">Russo</option>
            <option value="Sueco">Sueco</option>
        </select>
        <input id="text-71-2" value="Escolhe uma opção" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;">
        <br style="clear: left;">
    </div>
    <div class="form-element duplicate ">
        <label for="72">Escrita </label>
        <input class="peq" id="72-2" maxlength="35" name="Input.Fields[72]" size="35" title="" type="text" value="">
        <br style="clear: left;">
    </div>
    <div class="form-element duplicate ">
        <label for="73">Conversação </label>
        <input class="peq" id="73-2" maxlength="35" name="Input.Fields[73]" size="35" title="" type="text" value="">
        <br style="clear: left;">
    </div>
    <div class="form-element duplicate ">
        <label for="85"> </label>
        <br>
        <br style="clear: left;">
    </div>
</div>

jqObj object is the following:

[<select id=​"combo-71" style=​"width:​ 200px;​">​…​</select>​, <select id=​"combo-71-2" style=​"width:​ 200px;​">​…​</select>​]

I don't know why it respond only for a first element, but not the both of them. The elements are added dynamically, then I make a new select to match all existing elements in the page. I also cannot use .on() because the version of my jQuery is 1.6 .

Any suggestion?

Answer 1

bind will not bind a listener to an element created dynamically after bind has been called. However, delegate will, you just need to specify an appropriate ancestor:

$('#area-146').delegate('select', 'change', function(){
    //glorious code!
});

ref: https://api.jquery.com/delegate/