jQuery Mobile Listview refresh() 方法

jQuery Mobile 是一套基于 HTML5 的用户交互小部件工具箱，用于构建在 jQuery 之上的各种用途。它旨在构建可用于移动设备、选项卡和桌面的快速响应式网站。 jQuery Listview 是一个用于创建漂亮列表的小部件。它是一个简单且响应迅速的 Listview，用于查看无序列表。

在本文中，我们将使用 jQuery Mobile refresh()方法在页面加载后修改 DOM（文档对象模型）时更新列表项 UI。该列表可以在客户端使用 JavaScript 进行修改。

语法： refresh()方法不带任何参数，调用时，Listview 获取更新的 UI。

function refresh() {
    $(".items").listview("refresh");
}

CDN 链接：为 jQuery Mobile 使用以下 CDN。

示例：在此示例中，有一个包含一些项目的预填充列表。接下来，有两个输入部分和“单击添加” ，它将添加一个新的列表项。刷新 ListView UI 的Refresh按钮。

HTML

    
    
    
    jQuery Mobile Listview
    
    
    
    
    

  

    
    Geeksforgeeks
    jQuery Mobile Listview refresh() Method
    
    
        
            
            Data Structures
            
        
        
            
            Interview preparation
            
        
        
            
            Java Prgramming
            
        
    
    
        Name
        
        Link
        
        Click to add
    
    
        Refresh
    
        $(".items").listview({
            icon: "arrow-r",
        });
        function addItem() {
            var item = "<li>" +
                "<a href=\"" + $("#link").val() + "\" target=\"_blank\">" +
                $("#name").val() +
                "</a>" +
                "</li>"
            $(".items").append(item);
  
            $("#link").val("");
            $("#name").val("");
        }
        function refresh() {
            $(".items").listview("refresh");
        }
    

输出：