listview не отображается во второй раз. Я запускаю функцию .html()

Мой просмотр списка не будет отображаться при запуске моего (#main).html() во второй раз. Вот мой HTML,listview не отображается во второй раз. Я запускаю функцию .html()

<body> 
<div data-role="page" id="addressbook"> 
<div data-role="header"> 
<h1>Header</h1> 
<form id='headlist'> 
<button incline="true" id='heed'>ALL</button> 
<button incline="true">Button</button> 
</form> 
</div> 

<div data-role="content"> 
<ul data-role="listview" id='main'> 
    <li><a href="#">Page</a></li> 
    <li><a href="#">Page</a></li> 
<li><a href="#">Page</a></li> 
</ul>  
</div> 
</body>

Я добавил предупреждение перед моим .html(strComname) функции и strComname оповещения было показать, но ListView не будет отображаться. Я использую query1.9.1min.js и query.mobile-1.3.1.min.js

Вот мой сценарий

<script> 
var CAT = ''; 
var catlist = new Array(); 
var addra = [] ; 

catlist[0] = '5'; 
catlist[1] = '6'; 
catlist[2] = '7'; 
catlist[3] = '9'; 

addra.push('Taipei'); 
addra.push('London'); 
addra.push('USA'); 
addra.push('JAPAN'); 
addra.push('CAL'); 

$(document).ready(function(e) {intc(); 
}); 

function intc() { 
showme ('ALL'); 
showmelist(); 
} 

function showmelist(data) 
{ 
var strComname1 = ''; 
for (i = 0 ; i < catlist.length ; i ++) 
{ 
strComname1 = strComname1 + '<input type="submit" value="' +catlist[i] + '"'+ 'data-inline="true"'+"id='bb"+catlist[i]+"' onclick=showme('TYPE','"+"') />" ; 
} 

var strComname2 = '<input type="submit" value="ALL">'; 
var strComname3 = strComname2 +strComname1; 

$('#headlist').html(strComname3) ; 
} 



function showme (CAT) 
{ 

var strComname = '' ; 
switch (CAT) 
    { 

case 'ALL': 
    { 

    for (i = 0 ; i < addra.length ; i ++) 
     { 
    strCode = addra[i]; 
    strComname = strComname + "<li><a href='#"+strCode+"'"+ 'data-transition="slide">' + addra[i] + '</a></li>' + "\n" ; 

     } 

     break; 
} 

case 'TYPE': 
{ 

    for (i = 0 ; i < addra.length ; i ++) 
     {    
    strCode = addra[i] ; 
    strComname = strComname + "<li><a href='#"+strCode+"'"+ 'data-transition="slide">' + addra[i] + '</a></li>' + "\n" ; 

     } 

      break; 
     } 

    } 
alert(strComname); 

$('#main').html(strComname) ; 
$('#main').listview("refresh") ; 

} 
</script>

источник

2013-11-10 子維宋

На самом деле я не знаю, почему функция showme не вызывается, при нажатии на input, но я знаю, как получить он работает.

Как правило, не рекомендуется указывать события JavaScript непосредственно в HTML, используя атрибуты * *, такие как onclick. Лучше добавлять события, используя функцию addEventListener. Таким образом, также можно добавить несколько функций в одно и то же событие. jQuery предоставляет ярлыки для этого, которые работают в каждом браузере. Так, в конце вашей showmelist функции, вы можете добавить следующий код:

$('#headlist input').click(function() { 
    if($(this).val() === 'ALL') { 
     showme('ALL'); 
    } else { 
     showme('TYPE', $(this).val()); 
    } 
});

Во время тестирования я очистил ваш код немного. Вы найдете рабочий пример в this JSFiddle.

источник

2013-11-10 18:49:06 Jan

listview не отображается во второй раз. Я запускаю функцию .html()

ответ

Смежные вопросы