Typeahead getting ID results to undefined

Question

I am facing a strange behavior (I am not a javascript guru :-(). I want to use typeahead for autocompletion, what works fine for me. I have in a modal dialog a form with different kinds of form fields, with an event I want to enable/disable this form components. Works also fine for all except the typeahead input box.

What I have:

HTML-Snippet:

<div class="row detailRow">
    <div class="col-md-4">
        <label id="lblAuszubildender" class="detailLabel">Auszubildender:</label>
        </div>
            <div class="col-md-7 col-md-offset-1">
                <input id="txtAuszubildender" name="txtAuszubildender" class="typeahead form-control detailValue" placeholder="Auszubildender" />   

...

// Instantiate the Typeahead UI
$('#txtAuszubildender').typeahead(
{
    hint: true,
    highlight: true,
    minLength: 3
}, 
{
    displayKey: 'value',
    source: apprenticeEngine.ttAdapter()
});

JavaScript Snippet:

$(".detailRow").each(function(){
    var labelElement = $(this).find(".detailLabel");
    var valueElement = $(this).find(".detailValue");
    var labelId = labelElement.attr('id');
    var valueId = valueElement.attr('id');
    filterArray[labelId] = valueId;
});

When debugging, for all elements the JavaScript works fine, only the typeahead inputbox doesn`t give his ID.

But the strange thing is, all informations are given in the input object:

If I use var valueId = valueElement.prop('id');, instead of undefined I become then empty string.

I hope someone can give a hint.

EDIT: I played a little bit with the firebug console. I added the function:

function findDetailElements(){
    var filterArray = {};

    $(".detailRow").each(function(){
        var labelElement = $(this).find(".detailLabel");
        var valueElement = $(this).find(".detailValue");
        var labelId = labelElement.attr('id');
        var valueId = valueElement.attr('id');
        filterArray[labelId] = valueId;
    });

    return filterArray;
}

Filled a variable:

var list = findDetailElements();
console.log(list);

Result: ("txtAuszubildender still missing.")

Object { lblResource: "txtId", lblZustaendigeStelle: "selZustaendigeStelle", lblAuszubildender: undefined, lblBeruf: "selBeruf", lblFachrichtung: "selFachrichtung", lblSchwerpunkt: "selSchwerpunkt", lblBetrieb: "txtBetrieb", lblBeginn: "txtBeginn", lblEnde: "txtEnde", lblStatus: "txtStatus" }

BUT when I do something like:

$("#txtAuszubildender") 

I get a result:

Object { length: 1, context: HTMLDocument → contract, selector: "#txtAuszubildender", 1 weitere… }

Answer 1

好的，我发现了这个问题。以某种方式输入创建具有相同类名的第二个输入字段。因此，创建的第二个输入元素是第一个，并且没有ID，这就是我没有获得任何ID的原因。

有趣的是，我对第二个输入元素中的类值有任何控制吗？