Unable to access DIV element in Bootstrap Popover / Jquery autocomplete -

i have link opens bootstrap popver. inside of popover, have text field want use jquery autocomplete. problem is, unsure how access div id text box in popover -- using conventional methods don't work. autocomplete works fine on standalone page, not on popover. please help!

<a href="#" id="add_game" data-toggle="add_game" data-content='<div class="input-group">text: <input type="text" id="add_game_search"/></div>'>popover</a>  $(document).ready(function () {     $('[data-toggle="add_game"]').popover({         'trigger': 'click',             'html': 'true',             'placement': 'bottom'     }); });  $(document).ready(function () {     $('.add_game_search').autocomplete({                 source: function (request, response) {             $.ajax({                 global: false,                 url: "http://www.google.com",                 datatype: "html",                 success: function (data) {                     response($.map(data, function (item) {                         alert("in response");                     }));                 }             });         }     }); }); 

js fiddle: http://jsfiddle.net/hwep6/2/ simplified fs fiddle proving concept: http://jsfiddle.net/hwep6/3/

here problem not jquery autocomplete or bootstrap. actual reason #add_game_search generated dynamically when click popover have not handled.

change code below,

$(document).ready(function () {     $('body').on('click', '#add_game_search', function () {         alert("here");     }); }); 

jsfiddle