jquery 移动列表视图未格式化列表

Question

伙计们，我正在尝试实现 jquery 移动列表视图，就像这个带有缩略图的例子一样 http://demos.jquerymobile.com/1.4.3/listview/

但是，如果我将源代码复制到我的 html 中，它工作正常，但是如果我尝试使用 javascript 将它添加到列表中，它不起作用。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>App Title</title>

    <!-- Framework's CSS Files -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- Our CSS Files -->
    <link rel="stylesheet" href="css/custom.css">

</head>

<body>

    <div data-role="page" id="pageone">

        <div data-role="header">
            <h2>PolyMovie</h2>
        </div>

        <div data-role="main" class="ui-content">
            <form onsubmit="getMovies(event)">
                    <input type="search"id="searchText"/>
                  </form>
        </div>
        <ul data-role="listview" id="movies">
            <!-- if i add it here it works fine, but using the javascript the image is not formatted -->
        </ul>

        <div data-role="footer">
            <h2>Copyright 2018</h2>
        </div>

    </div>

    <!-- APIs js scripts -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <!-- Our js Scripts -->
    <script type="text/javascript" src="js/main.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</body>

</html>

这是我的 javascript 函数

function getMovies(event) {
    var searchText = document.getElementById("searchText").value;
    event.preventDefault();
    axios.get("https://api.themoviedb.org/3/search/movie?query=" + searchText + "&api_key=" + api_key + "&language=en-US&page=1&include_adult=false")
        .then((response) => {
            console.log(response);
            let movies = response.data.results;
            let output = '';
            $.each(movies, (index, movie) => {
                output += `
                <li><a href="#">
                    <img src="http://image.tmdb.org/t/p/w185/${movie.poster_path}">
                <h2>${movie.title}</h2>
                <p>${movie.release_date}</p></a>
                </li>
                `

            });

            document.getElementById("pageone").innerHTML = "<ul data-role='listview' id='movies'>"+output+"</ul>";
        })
        .catch((err) => {
            console.log(err);
        });
}

我真的不明白为什么会这样，但我认为是因为内心html

如有任何帮助，我们将不胜感激

Answer 1

每当动态添加 jquery 元素时，都需要刷新该元素以使样式生效。格式为：

$(selector).elementName("refresh");

所以你的情况是

$("#movies").listview("refresh");

jquery 移动列表视图未格式化列表

jquery mobile listview not formatting the list

javascript

html

listview

jquery-mobile

format