Javascript jquery代码的有趣行为

有趣的是，如果我删除alertdata[i].id的注释，代码就会正常工作。正如示例中所示，字符串没有连接，因此在选择框中没有选项。提示？帮忙

重新编辑，以便你们可以看到整个方法

function socialbookmarksTableData(data)
{
    var toAppend = '';
    var bookmarkingSites = '';

    $.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(data){

        for(var i = 0; i < data.length; i++){
            //alert( data[i].id);
            bookmarkingSites += '<option value = "' + data[i].id + '">' + data[i].title + '</option>';
        }
    });

    $.each(data.results, function(i, id){

        if(i%2 == 1)
            toAppend += '<tr class="first">';
        else
            toAppend += '<tr class="second">';
        if(data.results[i].status == "PENDING" || data.results[i].status == "POSTED")
            toAppend += '<td><span class="approved">' + data.results[i].status + '</span></td>';
        else
            toAppend += '<td>' + data.results[i].status + '</td>';
        toAppend += '<td><select name="sb2" id="sb2">'+
        '<option value="'+ data.results[i].bookmark +'">' + data.results[i].bookmark +'</option>' +
        bookmarkingSites + '</select></td>';
        toAppend += '<td>' + data.results[i].user + '</td>';
        toAppend += '<td>' + data.results[i].link + '</td>';
        toAppend += '<td>Some Article</td>';
        toAppend += '<td>' + data.results[i].title + '</td>';
        toAppend += '<td>' + data.results[i].description + '</td>';
        toAppend += '<td>' + data.results[i].tags + '</td>';
        toAppend += '<td>' + data.results[i].date + '</td>';
        toAppend += '<td><div class="actions">';
        toAppend += '<ul><li><input class="radio" name="input" type="checkbox" value="' + data.results[i].id + '" /></li>';
        toAppend += '<li><a class="action1" href="#">1</a></li>';
        toAppend += '<li><a class="action4" href="#">4</a></li></ul></div></td></tr>';
    });
    $("#searchTable tbody").append(toAppend);
}

---

你拥有的是一个经典的比赛条件。getJSON代码正在进行异步调用。当您有警报时，getJSON调用下面的代码将在调用从回调返回之前执行。如果没有警报，它将在回调后执行。这实际上是一个幸运的事件，因为你不能保证它会以这种方式发生。您应该将依赖于从getJSON调用返回的数据的所有代码放入回调中，这样您就可以保证在使用它之前返回数据

var bookmarkingSites = ''; 

$.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(data){ 

    for(var i = 0; i < data.length; i++){ 
        //alert( data[i].id); 
        bookmarkingSites += '<option value = "'
                            + data[i].id + '">'
                            + data[i].title + '</option>'; 
    } 
    <some more code> 
    toAppend += '<td><select name="sb2" id="sb2">'
                 + '<option value="'+ data.results[i].bookmark +'">'
                 + data.results[i].bookmark +'</option>'
                 +  bookmarkingSites + '</select></td>'; 
    <some more code>
}); // end of JSON call/callback

---

一个原因是：当你用单引号括住字符串时，你不必对双引号进行转义，反斜杠不起作用，因为转义操作在这里，我想。因此：

bookmarkingSites += '<option value = \"' + data[i].id + '\">' + data[i].title + '</option>';

---

从提供的代码来看，您似乎执行了JSON调用，回调函数将附加到bookmarkingSites变量。到目前为止还不错

箭头指向的代码位于回调函数之外，将在调用JSON回调之前运行，因此bookmarkingSite将为空字符串，并且在选择框中没有任何选项

---

构建选项标记的代码是否也会进入回调或回调调用的函数中？

以及周围的引号，在将文本放入HTML字符串的任何地方都需要HTML转义。由于这个原因，代码作为it标准充满了潜在的跨站点脚本XSS安全漏洞。写文章的内容通常比较容易​s和属性，而不是构造模板化的HTML字符串。

bookmarkingSites += '<option value="' + data[i].id + '">' + data[i].title + '</option>';

function socialbookmarksTableData(data)
{

    $.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(bookmarks){

        var toAppend = '';
        var bookmarkingSites = '';

        for(var i = 0; i < bookmarks.length; i++){
            //alert( bookmarks[i].id);
            bookmarkingSites += '<option value = "' + bookmarks[i].id + '">' + bookmarks[i].title + '</option>';
        }

        $.each(data.results, function(i, id){

            if(i%2 == 1)
                toAppend += '<tr class="first">';
            else
                toAppend += '<tr class="second">';
            if(data.results[i].status == "PENDING" || data.results[i].status == "POSTED")
                toAppend += '<td><span class="approved">' + data.results[i].status + '</span></td>';
            else
                toAppend += '<td>' + data.results[i].status + '</td>';
            toAppend += '<td><select name="sb2" id="sb2">'+
            '<option value="'+ data.results[i].bookmark +'">' + data.results[i].bookmark +'</option>' +
            bookmarkingSites + '</select></td>';
            toAppend += '<td>' + data.results[i].user + '</td>';
            toAppend += '<td>' + data.results[i].link + '</td>';
            toAppend += '<td>Some Article</td>';
            toAppend += '<td>' + data.results[i].title + '</td>';
            toAppend += '<td>' + data.results[i].description + '</td>';
            toAppend += '<td>' + data.results[i].tags + '</td>';
            toAppend += '<td>' + data.results[i].date + '</td>';
            toAppend += '<td><div class="actions">';
            toAppend += '<ul><li><input class="radio" name="input" type="checkbox" value="' + data.results[i].id + '" /></li>';
            toAppend += '<li><a class="action1" href="#">1</a></li>';
            toAppend += '<li><a class="action4" href="#">4</a></li></ul></div></td></tr>';
        });
        $("#searchTable tbody").append(toAppend);
    });
}