jsp页面异步加载数据进行$(".hotel-results-list").append(str)后样式失效

如果在 JSP 页面中使用异步加载数据的方式，比如使用 jQuery 的 ajax() 方法从后端接口获取数据，然后使用 append() 方法将 HTML 代码添加到指定的 DOM 元素中，出现样式失效的问题，可能是因为添加的元素是动态生成的，而样式表已经被加载完成，浏览器无法将样式应用到动态生成的元素上。

解决这个问题的方法是，在异步加载数据的回调函数中，使用 jQuery 的 on() 方法来监听添加元素的插入事件，当元素被添加到 DOM 树中时，就会触发 DOMNodeInserted 事件，然后我们再将样式应用到这个元素上。具体的代码如下：

$.ajax({
    url: 'your_api_url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        var str = '';
        // 处理数据，生成 HTML 代码
        $(".hotel-results-list").append(str);
        // 监听插入事件，在元素被添加到 DOM 树中时，将样式应用到元素上
        $('body').on('DOMNodeInserted', '.myClass', function() {
            $(this).css('color', 'red');
        });
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log('请求失败');
    }
});

在这个例子中，我们使用 ajax() 方法从后端接口获取数据，并使用 append() 方法将 HTML 代码添加到 .hotel-results-list 元素中。然后，我们使用 on() 方法监听插入事件，并在事件回调函数中将样式应用到添加的元素上。

如果需要添加多个样式，可以将样式写成 CSS 类，然后使用 addClass() 方法将这个类添加到元素上。如下代码所示：

.myClass {
    color: red;
    font-size: 16px;
}

$.ajax({
    url: 'your_api_url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        var str = '';
        // 处理数据，生成 HTML 代码
        $(".hotel-results-list").append(str);
        // 监听插入事件，在元素被添加到 DOM 树中时，将样式应用到元素上
        $('body').on('DOMNodeInserted', '.myClass', function() {
            $(this).addClass('myClass');
        });
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log('请求失败');
    }
});

这样添加的元素样式就可以生效了。