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

2019-11-01 22:35:28 阅读：323 来源： 互联网

标签：jquery-mobile css html javascript

我试图动态地添加到页面的链接,但是我的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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