无法选择动态创建的元素

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

当您尝试访问元素时，页面上不存在元素“#QuadVenueSearch”。 它将在您调用$("#addQuad").popover('show')（或类似的东西以显示弹出窗口）后创建。

显示弹出窗口后尝试调用$("#QuadVenueSearch").typeahead()。

希望这会有所帮助。

Answer 2

如果有人正在寻找这个问题的答案，我就是这样解决的：

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