追加 jquery 不起作用

append jquery does not work

本文关键字：不起作用 jquery 追加      更新时间：2023-09-26

我正在创建一个搜索建议，我想创建一个div并放置建议元素，如全名，图像和...在其中。所以我的 HTML 代码中有一个空的div，我的建议将被添加到其中。

<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>

我想在用户输入输入类型时显示搜索建议。所以我创建了jQuery函数。我的jQuery函数是：

$('#base_main_search_box').keyup(function () {
    $.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
            $(addSuggestion).append('<div class="base_searchSuggestionItem">' +
                '<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
                '<div class="base_searchSuggestionItem_info">' +
                    '<p class="base_searchSuggestionItem_info_name">' +
                        '<a href="">' +
                            result.movie_names[0] +
                        '</a>' +
                        '(' +
                        result.movie_yearProduction[0] +
                        ')' +
                    '</p>' +
                    '<p class="base_searchSuggestionItem_info_description">' +
                        result.movie_descriptions[0] +
                    '</p>' +
                '</div>' +
            '</div>');
            console.log('final: '+addSuggestion.innerHTML);
        }
    }});
});

输出为：

"final: undefined"

这是不正确的。

根据文档

.html()在 XML 文档中不可用，因此您需要在设置或检查其 HTML 之前将其添加到 DOM。

更改顺序，如下所示

        $(addSuggestion).append(search_item);
        $(search_item).html(
            div_innerHTML
        );
        console.log('div_innerHTML: '+div_innerHTML);
        console.log('search_item: '+$(search_item).innerHTML);
相关文章：