在jquery mobile中动态添加到

时间:2022-08-24 00:01:38

I'm trying to add list items to unordered lists in jquery mobile, but the formatting doesn't seem to be created properly.

我正在尝试将列表项添加到jquery mobile中的无序列表,但似乎没有正确创建格式。

<ul data-role="listview" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">
                        Title Divider
                    </li>
                    <li>
                        <a href="test.html" data-transition="slide">List item 1</a>
                    </li>

 </ul>

Script:

脚本:

$('ul').append('<li><a>hello</a></li>');

For some reason the li generated dynamically doesn't display the same way as the one that's statically created. Does anyone know why and how I can make it the same?

由于某种原因,动态生成的li不会显示与静态创建的li相同的方式。有谁知道为什么以及如何让它变得一样?

5 个解决方案

#1


87  

Try this:

尝试这个:

$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');

#2


44  

The answers provided turned out to be a little bit messy...

提供的答案结果有点凌乱......

$('ul').append('<li><a>hello</a></li>'); is ok, but it needs to refresh the listview, so all you need is:

$( 'UL')附加( '

  • 你好 ');没关系,但需要刷新列表视图,所以你只需要:

  • 你好');没关系,但需要刷新列表视图,所以你只需要:
  • $('ul').append('<li><a>hello</a></li>').listview('refresh');
    

    #3


    2  

    And if you want to change the attributes of UL, you might have to call .trigger('create') for the enclosing div. this ensures that UL is created again with properties reset.

    如果你想改变UL的属性,你可能不得不为封闭的div调用.trigger('create')。这可确保在重置属性的情况下再次创建UL。

    #4


    0  

    Your <a> tag is not referencing a webpage.

    您的标记未引用网页。

    try:

    尝试:

    $('ul').append('<li><a href="test2.html' data-transition="slide" />List Item 2</li>');

    #5


    0  

    You will have to add a class to the list tag

    您必须在list标签中添加一个类

    $('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello'))  ;
    

    JQuery mobile automatically adds a class to the list items, which can be seen if you run your page in firefox and debug it using firebug. Select whatever class has been applied and add it to your dynamically generated li tag.

    JQuery mobile会自动为列表项添加一个类,如果您在firefox中运行页面并使用firebug进行调试,则可以看到该类。选择已应用的任何类,并将其添加到动态生成的li标记中。

    #1


    87  

    Try this:

    尝试这个:

    $('ul').append($('<li/>', {    //here appending `<li>`
        'data-role': "list-divider"
    }).append($('<a/>', {    //here appending `<a>` into `<li>`
        'href': 'test.html',
        'data-transition': 'slide',
        'text': 'hello'
    })));
    
    $('ul').listview('refresh');
    

    #2


    44  

    The answers provided turned out to be a little bit messy...

    提供的答案结果有点凌乱......

    $('ul').append('<li><a>hello</a></li>'); is ok, but it needs to refresh the listview, so all you need is:

    $( 'UL')附加( '

  • 你好 ');没关系,但需要刷新列表视图,所以你只需要:

  • 你好');没关系,但需要刷新列表视图,所以你只需要:
  • $('ul').append('<li><a>hello</a></li>').listview('refresh');
    

    #3


    2  

    And if you want to change the attributes of UL, you might have to call .trigger('create') for the enclosing div. this ensures that UL is created again with properties reset.

    如果你想改变UL的属性,你可能不得不为封闭的div调用.trigger('create')。这可确保在重置属性的情况下再次创建UL。

    #4


    0  

    Your <a> tag is not referencing a webpage.

    您的标记未引用网页。

    try:

    尝试:

    $('ul').append('<li><a href="test2.html' data-transition="slide" />List Item 2</li>');

    #5


    0  

    You will have to add a class to the list tag

    您必须在list标签中添加一个类

    $('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello'))  ;
    

    JQuery mobile automatically adds a class to the list items, which can be seen if you run your page in firefox and debug it using firebug. Select whatever class has been applied and add it to your dynamically generated li tag.

    JQuery mobile会自动为列表项添加一个类,如果您在firefox中运行页面并使用firebug进行调试,则可以看到该类。选择已应用的任何类,并将其添加到动态生成的li标记中。