Как создать popover с динамическим содержимым html

Question

Я пытаюсь создать динамический контент popover. Он работал нормально, проблема в том, что он показывает один html-контент для всех popover. Пожалуйста, помогите мне найти решение

Мой код приведен ниже, а также моя дата Ниже приведен пример

var div = $("<div>").addClass("pull-right vitalDeviceConnectedIcon"); 
var vitals = ["Steps", "floor"]; 
var device = [{ 
    "apiId": "1", 
    "accountDeviceId": "83", 
    "manufacturerId": "26", 
    "device": "Fitbit One", 
    "api": "/fitbit/updatefitbitdata" 
}, { 
    "apiId": "2", 
    "accountDeviceId": "91", 
    "manufacturerId": "32", 
    "device": "Up", 
    "api": "/oauth/jawboneupdate" 
}, { 
    "apiId": "4", 
    "accountDeviceId": "92", 
    "manufacturerId": "34", 
    "device": "BG5", 
    "api": "/oauth/ihealthupdate" 
}]; 
for (var i = 0; i < device.length; ++i) { 
    var img = $("<img>"); 
    if (device[i].apiId == "1") { 
     $(img).attr("src", "img/fitbit_iconsm.png"); 
    } 
    if (device[i].apiId == "2") { 
     $(img).attr("src", "img/jawbone_iconsm.png"); 
    } 
    if (device[i].apiId == "4") { 
     $(img).attr("src", "img/ihealth_iconsm.png"); 
    } 
    $(img).data("data", device[i]); 
    $(img).click(function() { 
     var deviceInfo = $(this).data("data"); 
     syncDevices(deviceInfo.api, deviceInfo.accountDeviceId, vitalId, vitalName, deviceInfo.device); 
    }); 
    var divDetails = $("<div>"); 
    var label = $("<label>").html("Device: " + device[i].device); 
    var ul = $("<ul>") 
    $(divDetails).append(label); 
    $(divDetails).append(ul); 
    for (var j = 0; j < vitals.length; ++j) { 
     var li = $("<li>").html(vitals[j]); 
     $(ul).append(li); 
    } 
    var pForText = $("<p>").html("Please click on the icon to update the vital values"); 
    $(divDetails).append(pForText); 
    $(img).attr("data-toggle", "popover"); 
    $(img).attr("data-placement", "top"); 
    $(img).attr("data-trigger", "hover"); 
    console.info($(divDetails).html()); 
    try { 
     $(img).popover("destroy"); 
    } catch(err) { 

    } 
    $(div).append(img); 
    $(img).popover({ 
     html : true, 
     content : function() { 
      return divDetails; 
     }, 
    }); 
} 
return div; 

Answer 1

Ваша проблема заключается в том, что divDetails сохраняется в затворе, и поэтому каждый раз, когда функция контента , он возвращает тот же объект divDetails (тот, который был создан при последнем запуске цикла).

Самое простое решение просто устанавливает содержание без функции:

$(img).popover({ 
    html : true, 
    content : divDetails 
}); 

Другим решением является создание новой области для каждого вызова пирог:

(function(div) { 
    $(img).popover({ 
     html : true, 
     content : function() { 
      return div; 
     } 
    }); 
})(divDetails);