-1
Я прочитал несколько сообщений, например this one, но он не работает для меня.Добавить() дублирующий элемент списка
Я перечисляю данные в виде списка. Когда я нажимаю кнопку назад на заголовке, чтобы повторить процесс, я хочу, чтобы append() не добавлял один и тот же элемент списка каждый раз.
Как я мог это сделать? Я использовал .html(), но я теряю css во второй попытке. Я переместил $ ('# list'). Append (list_item); до $ .each (....), но он не работал.
$.each(vaga, function(index, item){
list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';
});
$('#list').append(list_item);
index.html
<head>
<link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
</head>
<body>
<div class="upage" id="areapage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_7" data-uib="jquery_mobile/header" data-ver="0" id="header_areas">
<h1>Header</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_25 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="bars" data-iconpos="notext" id="opensidebar_btn">Button</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left" id="page_74_57">
<div class="grid grid-pad urow uib_row_5 row-height-5" data-uib="layout/row" data-ver="0">
<div class="col uib_col_3 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col left">
<p style="font-style: italic; color: #246525;">Select by area</p>
<span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
<div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0">
<div class="col uib_col_5 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col left">
<div class="sbs-container widget uib_w_8 d-margins" data-uib="layout/side_by_side" data-ver="0">
<div class="leftContent widget-container">
<a class="uib-graphic-button default-graphic-sizing default-image-sizing hover-graphic-button active-graphic-button default-graphic-button default-graphic-text widget uib_w_10 d-margins media-button-text-bottom" data-uib="media/graphic_button" data-ver="0"
id="admin">
<img src="images/administrativa.png">
<span class="uib-caption">Admin</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LIST PAGE -->
<div class="upage" id="listpage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_15" data-uib="jquery_mobile/header" data-ver="0" id="header_listpage">
<h1>Header</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_18 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="arrow-l" data-iconpos="notext" id="listpage_back_btn" data-transition="fade">Button</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left" id="page_91_35">
<div class="widget uib_w_16 ui-content no_wrap outset-margin d-margins" data-uib="jquery_mobile/listview" data-ver="0" id="listview">
<ul data-role="listview" id="list">
<!-- list item appended in js -->
<!--<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="#"><span>Listitem</span></a>
</li>-->
</ul>
</div>
</div>
</div>
</div>
</body>
сказать мне больше о «данных-UIB = "jquery_mobile/ListItem" данных вер =-значок данных "0"=» carat-r "', какой код или зависимость использует эти атрибуты? Вероятно, это проблема, с которой вы сталкиваетесь. – 42shadow42
@ 42shadow42 Это гибридное приложение, созданное с помощью intel xdk с использованием jquery framework –
Можете ли вы поделиться фрагментом кода, который демонстрирует, как вы используете jquery для привязки к этим атрибутам? – 42shadow42