Невозможно выбрать динамически созданные элементы

Question

У меня есть эта проблема, я искал, но не могу найти ответ. Я динамически создавать код ниже:

$("#addQuad").popover({ 
placement : 'bottom', 
title : 'Title', 
html:true, 
content : '$htm', 
template: '<div class="popover add_quad_popover"><div class="arrow"></div><div class="popover-inner"></h3><div class="popover-content"></div></div>' 
}); 

QuadVenueSearch в моей переменной $ HTM, для жизни меня я не могу получить доступ к этому элементу. Как я могу продолжить и каким-то образом добавить этот элемент в DOM?

$("#QuadVenueSearch").typeahead({ 

    source: function (query, process) { 

    $.ajax({ 
    url: QuadzerObj.APP_PATH + "venues/typeahead_search", 
    type: "get", 
    data: {query: query}, 
    dataType: "json", 
    success: function (data) { 
    venues = []; 
    map = {}; 

    $.each(data, function(index, venue){ 
       map[venue.name] = venue; 
       venues.push(venue.name); 
     }); 
    process(venues); 
    } 
}); 
}, 
updater: function(item) { 
    $("#QuadVenueID").val(map[item].id); 
     return item; 
} 
}); 

Я пытался связать их, делая это, но до сих пор не работает:

$('html').bind('bindQPS',function(){ 
$("#QuadVenueSearch").typeahead({ 

source: function (query, process) { 

$.ajax({ 
url: QuadzerObj.APP_PATH + "venues/typeahead_search", 
type: "get", 
data: {query: query}, 
dataType: "json", 
success: function (data) { 
venues = []; 
map = {}; 

$.each(data, function(index, venue){ 
       map[venue.name] = venue; 
       venues.push(venue.name); 
     }); 
    process(venues); 
    } 
}); 
}, 
updater: function(item) { 
    $("#QuadVenueID").val(map[item].id); 
     return item; 
} 
}); 
}); 

$("#addQuad").popover({ 
placement : 'bottom', 
title : 'Title', 
html:true, 
content : '$htm', 
template: '<div class="popover add_quad_popover"><div class="arrow"></div><div class="popover-inner"></h3><div class="popover-content"></div> </div>'}).trigger('bindQPS'); 

Answer 1

В случае, если кто-то ищет ответ на этот вопрос, вот как я ее решил:

$('body').on('focus','#QuadVenueSearch',function(e){ 

    $(this).typeahead({ 

    source: function (query, process) { 
    $.ajax({ 
    url: QuadzerObj.APP_PATH + "venues/typeahead_search", 
    type: "get", 
    data: {query: query}, 
    dataType: "json", 
    success: function (data) { 
    venues = []; 
    map = {}; 
    $.each(data, function(index, venue){ 
       map[venue.name] = venue; 
       venues.push(venue.name); 
     }); 
    process(venues); 
    } 
}); 
}, 
updater: function(item) { 
    $("#QuadVenueID").val(map[item].id); 
     return item; 
    } 
    }); 
}); 

Answer 2

Элемент «#QuadVenueSearch» не существует на странице, когда вы пытаетесь получить к нему доступ. Он будет создан после того, как вы вызовете $("#addQuad").popover('show') (или что-то подобное, чтобы показать всплывающее окно).

Попробуйте позвонить $("#QuadVenueSearch").typeahead() после отображения всплывающего окна.

Надеюсь, это поможет.