用于动态创建按钮的bootstrap popover

时间:2014-01-14 11:22:11

标签: jquery twitter-bootstrap

我在jquery中被击中。我有一个json。我根据json中的项目数创建按钮。在这些按钮上悬停操作不显示Popover。请帮忙。我不知道我在哪里弄错了。并且在调试时没有任何想法。建议请...

<style type="text/css">
    @IMPORT url("bootstrap.css");
</style>

<script src="bootstrap.js"></script>

$(document).ready(function()
{
    $.getJSON('http://localhost/3s/Sample/JsonCreation.php', function(data)
    {   
        questionsArray = data;
        variable = 1;
        for (var question in questionsArray)
        {
            var button = $("<input>").attr("type", "button").attr("id", "buttonWithQNo").attr("class", "btn btn-default").attr("data-title", "title").attr("data-content", "content").val(variable);
            $('#questionButtonsDiv').append(button);
            $('#questionButtonsDiv').append(" ");
            variable++;
        }

    }); 
    $('#buttonWithQNo').popover({trigger: 'hover'});    
});

编辑 - 我知道甚至在将元素添加到文档模型之前就添加了悬停操作。但是我应该在哪里添加悬停动作? PS我需要它用于所有按钮(每个弹出窗口上的标题和内容是唯一的 - 它的值应该来自json)...

1 个答案:

答案 0 :(得分:0)

试试这个

$(document).ready(function()
{
    $.getJSON('http://localhost/3s/Sample/JsonCreation.php', function(data)
    {   
        questionsArray = data;
        variable = 1;
        for (var question in questionsArray)
        {
            var button = $("<input>").attr("type", "button").attr("class", "btn btn-default buttonWithQNo").attr("data-title", "title").attr("data-content", "content").val(variable);
            $('#questionButtonsDiv').append(button);
            $('#questionButtonsDiv').append(" ");
            variable++;

            //
            $(button).popover({trigger: 'hover'}); 
        }


    });    
});

检查fiddle