Question

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

 <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>

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

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);

      });
        }

  });

  });
  }

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

Answer 1

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

您可以将这些行粘贴到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()
    });

  });

}

为什么不能在ajax中动态创建图标？

1 个答案: