2016-10-15 45 views
0

我面临着一个奇怪的行为(我不是一个javascript guru :-()。我想使用typeahead进行自动完成,对我来说工作正常。 。各种形式的字段,其中我想启用/禁用此表格组件的事件也能正常工作之外的所有预输入的输入框Typeahead得到的ID结果为undefined

我有什么:

HTML - 摘录:

<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代码段:

$(".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; 
}); 

调试时,所有元素的JavaScript的正常工作,只有预输入输入框不`吨给他的ID。 enter image description here

但奇怪的是,所有信息都给出了输入对象: enter image description here

如果我使用var valueId = valueElement.prop('id');,而不是不确定的我变得那么空字符串。

我希望有人能给一个提示。

编辑: 我玩了一点点的萤火虫控制台。我添加了功能:

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; 
} 

充满变量:

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

结果:( “txtAuszubildender仍下落不明。”)

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

但是当我做这样的事情:

$("#txtAuszubildender") 

我得到一个结果:

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

[我无法重现此](http://jsfiddle.net/CNMfL/292/),你的代码对我来说工作正常。你应该考虑使用'data-id'而不是''txtAuszubildender'',因为'id'是一个**唯一的**标识符,并且只能在文档中使用一次。 –

+0

谢谢Fabian,不幸的是data-id对我不起作用。 “txtAuszubildender”是独一无二的。我在这个问题上提供了更多的信息。 –

回答

0

好的,我找到了问题。以某种方式键入创建第二个输入字段具有相同的类名称。因此创建的第二个输入元素是第一个,没有id,这就是为什么我没有得到任何ID。

enter image description here

什么是有趣的,我对自己在这第二个输入元素的类值的任何控制?