javascript-将lis动态添加到ul中时,CSS样式丢失

我试图动态地添加到页面的链接,但是我的CSS样式仅在每次重新加载后第一次创建列表时才应用于列表项.

以下是我的html：

 <div data-role="page" data-theme="b" id="selectConfirmation">
      <div data-role="header" data-theme="b" >
        <a class="cancelSelectConfirmationBtn ui-btn-left" data-role="button" data-icon="arrow-l" data-iconpos="left"  data-theme="b">Back</a>
        <h1>
          Confirmation Events
        </h1>
      </div>
      <div data-role="content" style="font-size: 16px;">
      <ul id="eventList" data-role="listview" class="ui-listview"></ul>
      </div>      
      </div>

这是我的Java脚本中添加链接的部分：

函数createList(ceg){

var list = document.getElementById(‘eventList’);

for(i=ceg.length-1,k=0; k<ceg.length; i--,k++){
 var check = ceg.charAt(i);

 if(check == 1){
  var events = configJSON.root.DynamicDef.Application.SB_Primary.add[k]["-Data"].split(";");
  var li = document.createElement('li');
      li.innerHTML = '<a> ' + events[1] + '</a>';
  li.setAttribute('class', 'selectConfirmation');
  li.setAttribute('confirmcode', '5');
  li.setAttribute('data-theme', 'c');
  list.appendChild(li);
 }
}
var $list = $(list);
if ($list.hasClass('ui-listview')) {//this listview has already been initialized so refresh it
    $list.listview('refresh');
} else {//this list needs to be initialized
    $list.trigger('create');
}

gotoConfirmation();
}

有人知道我重新创建列表时为什么删除CSS样式吗？

解决方法:

在您的for循环之后,您可以直接添加以下代码,该代码将检查jQuery Mobile框架是否已初始化列表视图：

var $list = $(list);
if ($list.hasClass('ui-listview')) {//this listview has already been initialized so refresh it
    $list.listview('refresh');
} else {//this list needs to be initialized
    $list.trigger('create');
}

这要求您从< ul>中删除ui-listview类.标签,因此您可以将其用作jQuery Mobile框架是否已初始化列表视图的标志.

这是一个演示：http://jsfiddle.net/PQ39n/15/

更新

您在评论中表示收到此错误：

Uncaught cannot call methods on listview prior to initialization;
attempted to call method ‘refresh'”

您收到此错误,是因为您尝试刷新尚未初始化的列表.我上面的代码将帮助解决此问题,因为它会检查listview是否已初始化,并根据listview的状态运行正确的代码.

这对于刚接触jQuery Mobile的开发人员来说是一个常见的问题,因为要绑定到许多不同的事件(页面展示,页面创建,页面初始化等),并且列表视图小部件可能会也可能尚未初始化事件发生.

标签：jquery-mobile,css,html,javascript
来源： https://codeday.me/bug/20191101/1986863.html