javascript - 动态创建独特的按钮

Question

我是 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() 并像所有按钮一样为其提供数据值然后有相同的数据)？

Answer 1

我建议交换你追加的位置和追加的位置。这样，您保留了附加的对象，并且应该能够将其作为标准的 jQuery 选择器来使用。在你的代码中，我注释掉了 .button() 和 .append() 行，因为我不确定你想用它们做什么。如果您在添加这些行时需要帮助，只需对我的回答发表评论即可；)

哦，我差点忘了:我使用 var i 来为 username 和 userType 数据模拟不同的内容。

这里有适合您的 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++;

});