Why cannot create icons dynamically in ajax?

Question

Normally, when I write the followings:

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

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

  });

It works and I can see a popover for the icon.But when I write the following code,to create the icons dynamically, but I cannot show popovers for the newly created icons.

html part:

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>

In Stations combobox, options are filled when the page is loaded.They are filled normally.

js function for getting the number of passengers from php, and create icons accordingly:

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

      });
        }

  });

  });
  }

The icons appear in the page under the combobox.I just put to try, I don't know how to insert the new created icons to a tag.I just appended the newly created icons to tag.What is wrong here?Why I cannot show popovers for the created icons?Please help.

Answer 1

The JS code that you have which successfully wires-up the popover for elements $("a[rel=popover]") needs to execute after you have dynamically added your icons.

You could paste those lines into the end of the logic in sta_callStation() but it is probably better to put them into their own function and call that from sta_callStation().

Something like:

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

  });

}