jquery - 未呈现 html 中的图标和文本

Question

我有一个 html 渲染问题，最初我是从模拟中加载数据，它看起来像这样。

当我注释掉添加到模拟数据中的代码时，我的页面没有正确呈现所有元素

如果我将鼠标悬停在一个元素上它会渲染它

如果我在一个空白行中添加

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
               <th></th>
               <th>Task</th>
            </tr>
        </thead>
        <tbody id="todoListTasksHome"> 
            <tr></tr>                                                                                                                                                    
            <tr id="task_1">
                <td style="width:64px"><button class="btn btn-minier btn-green" onclick="completeTask( 1 )">complete</button></td>
                <td>description</td>
            </tr>
        </tbody>
    </table>
</div>

有效

添加mock数据的代码看起来是

var load_todo_list_tasks = function () {
    var loadedData = [
    {
        "comment": "",
        "task": "Go see a chiro",
        "task_id": 123,
        "completed": false,
        "completed_date": "",
        "set_date":"07/08/13"
    }];

    if (loadedData.length>0){
        $("#tasks_completed").hide();
        $("#tasks_home_completed").hide();
        numberTasksForToday=0;
        for (var i = 0; i < loadedData.length; i++) {
            var data = loadedData[i];
            numberTasksForToday++;
            displayTodoListTask(data);
        }
    }
};

var displayTodoListTask = function (data) {
    var checked = "";
    if (data['completed'] === false) {
        var completedStyle = "style=\"display:none\"";
        var taskStyle = "";
    } else {
        var completedStyle = "";
        var taskStyle = "style=\"display:none\"";
    }
    if (data['completed_date'] == "") {
        var d = new Date();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        data['completed_date'] = (day < 10 ? '0' : '') + day + '/' +
        (month < 10 ? '0' : '') + month + '/' +
        String(d.getFullYear()).substring(2, 4);
    }
    var html =
        "<tr id=\"task_" + data['task_id'] + "\" " + taskStyle + ">" +
            "<td style=\"width:64px\"><button class=\"btn btn-minier btn-green\" onclick=\"completeTask(" + data['task_id'] + ")\">complete</button></td>" +
            "<td>" + data['task'] + "</td>" +
        "</tr>";
    $("#todoListTasks").prepend(html);

    var html =
        "<tr id=\"task_home_" + data['task_id'] + "\" " + taskStyle + ">" +
            "<td style=\"width:64px\"><button class=\"btn btn-minier btn-green\" onclick=\"completeTask(" + data['task_id'] + ")\">complete</button></td>" +
            "<td>" + data['task'] + "</td>" +
        "</tr>";
    $("#todoListTasksHome").prepend(html);

};

我不确定如何调试它，因为控制台日志中没有错误，有什么想法吗？

更新

<li class="active" onclick="showHome()" id="menu_home">
    <a href="#">
        <i class="icon-home"></i>
        <span class="menu-text"> Home </span>
    </a>
</li>
.   background-color: rgb(255, 255, 255);
.   border-bottom-color: rgb(229, 229, 229);
.   border-bottom-style: solid;
.   border-bottom-width: 1px;
.   border-image-outset: 0px;
.   border-image-repeat: stretch;
.   border-image-slice: 100%;
.   border-image-source: none;
.   border-image-width: 1;
.   border-left-color: rgb(57, 57, 57);
.   border-left-style: none;
.   border-left-width: 0px;
.   border-right-color: rgb(57, 57, 57);
.   border-right-style: none;
.   border-right-width: 0px;
.   border-top-color: rgb(252, 252, 252);
.   border-top-style: solid;
.   border-top-width: 1px;
.   box-sizing: border-box;
.   color: rgb(57, 57, 57);
.   display: block;
.   font-family: 'Open Sans';
.   font-size: 13px;
.   height: 40px;
.   line-height: 19.5px;
.   list-style-image: none;
.   list-style-position: outside;
.   list-style-type: none;
.   margin-bottom: 0px;
.   margin-left: 0px;
.   margin-right: 0px;
.   margin-top: 0px;
.   padding-bottom: 0px;
.   padding-left: 0px;
.   padding-right: 0px;
.   padding-top: 0px;
.   position: relative;
.   text-align: left;
.   width: 42px;

用于主页图标

.   -webkit-font-smoothing: antialiased;
.   background-image: none;
.   background-position: 0% 0%;
.   background-repeat: repeat;
.   box-sizing: border-box;
.   color: rgb(43, 125, 188);
.   cursor: auto;
.   display: inline-block;
.   font-family: FontAwesome;
.   font-size: 18px;
.   font-style: normal;
.   font-weight: normal;
.   height: 36px;
.   line-height: 36px;
.   list-style-image: none;
.   list-style-position: outside;
.   list-style-type: none;
.   margin-right: 2px;
.   margin-top: 0px;
.   min-width: 30px;
.   text-align: center;
.   text-decoration: none solid rgb(43, 125, 188);
.   text-shadow: none;
.   vertical-align: middle;
.   width: 30px;

我相信这可能与 https://productforums.google.com/forum/#!topic/chrome/U5wefygGAow

Answer 1

你的代码很好，必须用 css 做一些事情。尝试使用不使用图像作为左侧的背景。直接使用 img 而不是将其放在背景中确实会产生问题。它可能会解决你的问题它解决了我的问题。您应该只使用 var html 一次，它也会产生此类问题。如果我能看到 html 和 css，我的回答可能会好得多。