동적으로 생성 된 입력에 대한 선전을 위임하려면

Question

인벤토리 세부 정보를 입력하는 데 사용하는 html 테이블이 있습니다.이 테이블에는 bootstrap.but의 typeahead 이벤트를 바인딩하는 제품 이름 입력 상자가 있습니다. 이미 렌더링 된 페이지에있는 첫 번째 행 입력 상자의 경우 typeahead가 작동합니다. 그러나 더 많은 항목에 대한 새 행을 추가 할 때 typeahead는 작동하지 않습니다. 이벤트 위임 개념에 대해서는 알고 있지만 문제는 내가 어떻게 이걸 구현할 수 있는지 모르겠다. 이걸 통해 나를 안내 해줘. 미리 감사드립니다. 여기 여기

<table> 
<thead> 
<tr> 
<td>Product name</td> 
<td>Amount</td> 
</tr> 
</thead> 
<tbody class="details"> 
<tr> 
<td><input type="text class="items" name="items" id="items" data-provide="typeahead" /> </td> 
<td><input type="text" name="amt" id="amt" class="amt" /></td> 
</tr> 
</tbody> 
</table> 

새로운 rows- 여기

$(function(){ 
    $('#add').click(function(){ 
    addnewrow(); 
    }); 
}); 
function addnewrow(){ 
var tr = '<tr>'+ 
'<td><input type="text" name="items" id="items" class="items" data-provide="typeahead" autocomplete="off" /></td>'+ 
'<td><input type="text" name="amt" id="amt" class="amt" autocomplete="off" /></td>'+ 
'</tr>'; 
$('.details').append(tr); 
} 

의 I 사용한 방법

$(function(){ 
    $('#items').typeahead({ 
    source: function(query,process){ 
    $.ajax({ 
     url: 'itemexist.php', 
     type: 'POST', 
     data: 'query=' +query, 
     dataType: 'JSON', 
     async: true, 
     success: function(data){ 
      process(data); 
     } 
    }); 
    } 

    }); 
}); 

내가 아는 typeahead-이를 추가하는 데 사용되는 자바 스크립트입니다 테이블 - 내 HTML입니다 질문을하기 전에 요청했지만 허용 된 솔루션이 없으며 이러한 솔루션을 사용해 보았지만 제대로 작동하지 않습니다. 여기 내가 시도 것입니다,하지만 여전히

$(document).on("keypress",".items",function(){ 
$('.items').typeahead({ 
    source: function(query,process){ 

    $.ajax({ 
     url: 'itemexist.php', 
     type: 'POST', 
     data: 'query=' +query, 
     dataType: 'JSON', 
     async: true, 
     success: function(data){ 
      process(data); 
     } 
    }); 
    } 

    }); 
}); 

Answer 1

가 잘 나는이 다른 어떤 하나 를 도울 수 있도록 this..I이를 게시하고 달성 워크 것 같다하지 않습니다 여기에 솔루션 -

입니다

$(function(){ 
$('body').delegate('.items','focus',function(){ 
$(this).typeahead({ 
    source: function(query,process){ 

    $.ajax({ 
     url: 'itemexist.php', 
     type: 'POST', 
     data: 'query=' +query, 
     dataType: 'JSON', 
     async: true, 
     success: function(data){ 
      process(data); 
     } 
    }); 
    } 

    }); 
}); 
    });