Q:

Unable to access DIV element in Bootstrap Popover / Jquery autocomplete

I have a link which opens a Bootstrap popver. Inside of this popover, I have a text field that I want to use as a Jquery Autocomplete. The problem is, I am unsure how to access the Div ID for the text box that is in the popover -- using conventional methods don't work. My Autocomplete works fine on a standalone page, but 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 the concept: http://jsfiddle.net/hwEp6/3/

A:

Here the problem is not with jQuery autocomplete or bootstrap.   The actual reason is #add_game_search is generated dynamically when you click the Popover which you have not handled.
Change your code as below,
$(document).ready(function () {
    $('body').on('click', '#add_game_search', function () {
        alert("here");
    });
});

JSFiddle

