Question

我正在使用jQuery创建并填充列表，并希望动态添加li元素。

我尝试过以下但是它对我没用。相反，浏览器崩溃了。有人可以帮忙吗？

$(document).ready(function() {
$(".tophundredwatchlist").hide();

$(".addtophundredwatchlist").click(function() {
        $.ajax({
            type : "GET",
            url : "/watchlisttophundred/",
            success : function(data){
                generateList(data);
            }
        });
        $(this).next().toggle();
        return false;
    });

//this section draws the list

function generateList(data)
{
    var raw_tag = "<ul id='listwatchlist' class='listwatchlist'>";
    var add_new = "Add New"
    var json_array = data.json_array;
    for (var json_count = 0; json_count < json_array.length; json_count++)
    {
        var raw_string = "<li id='watchlistitem' class='watchlistitem'>" + json_array[json_count].watch_list_name + "</li>"
        raw_tag = raw_tag + raw_string
    }
    raw_tag =  raw_tag + "<div id='addnew' class='addnew'>" + add_new + "</div>"
    raw_tag =  raw_tag + "<div id='newtext' class='newtext'></div>"
    raw_tag = raw_tag + "</ul>"
    $(".listwatchlist").html(raw_tag)
}

//when i try to add the new li like this my browser crashes
$('.newwatchlisttext').live("keypress",function(event) {
    if(event.which == '13'){
        var watch_list_name = $(this).val();
        /**********************************************************/
        $.ajax({
            type : "GET",
            url : "/addwatchlistfromtophundredajaxhandler/",
            data : "watch_list_name=" + watch_list_name,
            success : function(msg){
                //$("listwatchlist ul").append('<li>' + data.watch_list_name + '</li>');
            }
        });
        /**********************************************************/
        $(".addnew").show()
        $(".newtext").hide()

        }
});

Answer 1

你的选择器错了。你应该替换这一行：

$("listwatchlist ul").append('<li>' + data.watch_list_name + '</li>');

使用：

$("ul#listwatchlist").append('<li>' + data.watch_list_name + '</li>');

哦，还有div在ul中嵌套，正如另一个答案所指出的那样。

Answer 2

正如JohnP所说，你可能遇到的主要问题是尝试将div嵌套在ul内。

但是这里有一种创建dom元素的方法，这些元素使用jQuery的内置功能，可能不会出错。

var raw_tag = $("<ul id='listwatchlist' class='listwatchlist' />");
var add_new = "Add New"
var json_array = data.json_array;
for (var json_count = 0; json_count < json_array.length; json_count++)
{
    raw_tag.append(
        $("<li id='watchlistitem' class='watchlistitem' />")
                    .text(json_array[json_count].watch_list_name));
}
//as noted by JohnP you can't really put div's inside a UL, so you'll need to change that
$(".listwatchlist").html(raw_tag)

另外，请确保您在新页面中为新ul，listwatchlist提供的ID 唯一。你绝对不能有多个具有相同id的元素。

如何使用JQuery将LI作为最后一个元素附加到UL

2 个答案: