动态创建独特的按钮

时间:2014-07-06 17:19:13

标签: javascript jquery html jquery-ui

我是jQuery的新手,我正在尝试动态创建jQuery UI按钮并将它们添加到列表中。我可以创建一个列表项,但不会再添加它。我做错了什么?

$('#buttonList').append('<li><button>'+ username + '</button>')
       .button()
       .data('type', userType)
       .click(function(e) { alert($(this).data('type')); })
.append('<button>Edit</button></li>');

<div>
    <ul id="buttonList">    
    </ul>
</div>

这只会创建一个带有两个按钮的列表项(虽然第二个按钮似乎被包含在第一个按钮中,但我可能会想出这个问题)。如何使用自己独特的数据创建多个列表项?值(即我不能对特定按钮类执行find()并给它数据值,因为所有按钮都会有相同的数据)?

3 个答案:

答案 0 :(得分:2)

在方法参数中包装任何html时,需要完整的标记。您不能像处理文本编辑器一样处理DOM并添加开始标记,添加更多标记然后附加结束标记。

任何插入DOM的内容都必须是完整且有效的HTML。

您也不了解append()返回内容的背景。它不是参数中的元素,而是您要附加的元素集合。您在整个button()上致电<UL>

我建议您在尝试将这么多方法链接在一起之前更好地理解jQuery

答案 1 :(得分:2)

我建议您交换您要追加的内容以及您要追加的位置。这样,您保留附加的对象,并且应该能够将其作为标准jQuery选择器使用。从您的代码中我评论了.button().append()行,因为我不确定您要对它们做什么。如果您需要帮助添加这些行,只需在我的答案中删除评论;)

哦,我差点忘了:我使用var i来模拟usernameuserType数据的不同内容。

你的JSFiddle就在这里:http://jsfiddle.net/cRjh9/1/

示例代码(html部分):

<div>
    <p id="addButton">add button</p>
    <ul id="buttonList">
    </ul>
</div>

示例代码(js部分):

var i = 0;

$('#addButton').on('click', function()
{

  $('<li><button class="itemButton">'+ 'username' + i + '</button></li>').appendTo('#buttonList')
  //.button()
  .find('.itemButton')
  .data('type', 'userType'+i)
  .click(function(e) { alert($(this).data('type')); 
                     })
  //.append('<button>Edit</button></li>')
  ;
  i++;

});

答案 2 :(得分:0)

您可以修改一种非常简单的方法 - FIDDLE

我还没有添加数据属性,也没有添加点击功能(我不确定我喜欢 内联&#34;点击&#34;函数 - 我通常在jQuery中执行它们并尝试弄清楚如何制作 代码高效。可能不是很理性,但我经常如此)。

JS

var names = ['Washington', 'Adams', 'Jefferson', 'Lincoln', 'Roosevelt'];

for( r=0; r < names.length; r++ )
   {
    $('#buttonList').append('<li><button>'+ names[r] + '</button></li>');
    }

$('#buttonList').append('<li><button>Edit</button></li>');