0

通常，当我写以下内容时：

 <a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>

和js：

 $("a[rel=popover]").each(function(){

    $(this).popover({
        trigger: 'hover',
        placement: 'top',
        html: true,
        title:"Passenger Info",
        content: "content "+$(this).attr('id') 
    })
    .click(function(e) {
        e.preventDefault()
    });

  });

它可以工作，我可以看到图标的弹出框。但是当我编写以下代码时，动态创建图标，但我无法显示新创建的图标的弹出框。

html部分：

Stations:
 <select name="selectStation" id="selectStation" onchange="sta_callStation(this);"></select>

      <a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
      <div id="infoOfPassengers"></div>
      <div id="distType"></div>
      <div id="distParams"></div>

在 Stations 组合框中，选项在页面加载时填充。它们正常填充。

js函数用于从php获取乘客数量，并相应地创建图标：

function sta_callStation(sel){
 $('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
   $('#sta_numberOfIcons').empty();
      $.getJSON('Stations.php', function(station){

        $.each(station, function(sta_key, sta_value) {

        if(sel.value==sta_key)
        {
          $.each(sta_value.passengers, function(j,passengers) 
        {

         var pas_icon = document.createElement("a");

          pas_icon.className ='icon-user';
          pas_icon.id='id_'+j;

          pas_icon.setAttribute('href', '#');
          pas_icon.setAttribute('rel', 'popover');
          //alert('id_'+(j));
          var empty=document.createElement("a");
          empty.appendChild(document.createTextNode(" "));
          document.getElementById('sta_numberOfIcons').appendChild(pas_icon);

          document.getElementById('sta_numberOfIcons').appendChild(empty);

      });
        }

  });

  });
  }

图标出现在组合框下的页面中。我只是尝试，我不知道如何将新创建的图标插入标签。我只是将新创建的图标附加到标签。这里有什么问题？为什么我不能为创建的图标显示弹出框？请帮忙。

4

1 回答 1

1

在您动态添加图标后popover，您拥有的成功连接for 元素的 JS 代码$("a[rel=popover]")需要执行。

您可以将这些行粘贴到逻辑的末尾，sta_callStation()但最好将它们放入自己的函数中并从sta_callStation().

就像是：

function bindMyPopovers() {
    $("a[rel=popover]").each(function(){
    $(this).popover({
        trigger: 'hover',
        placement: 'top',
        html: true,
        title:"Passenger Info",
        content: "content "+$(this).attr('id') 
    })
    .click(function(e) {
        e.preventDefault()
    });

  });

}
于 2013-04-14T16:11:30.823 回答