listview не показывает второй раз, когда я запускаю функцию .html ()

Question

listview не показывает второй раз, когда я запускаю функцию .html ()

0

Мое представление списка не будет отображаться, когда я запустил мой (#main).html() второй раз. Вот мой 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, но список не появится. Я использую 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>

子維宋 10 нояб. 2013, в 16:01

Источник

Теги:

jquery

html

listview

1 ответ

Ещё вопросы

Jan · Accepted Answer · 2013-11-10T16-36-00.000Z

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

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

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

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