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

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

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

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

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

Answer 2

我建议您交换您要追加的内容以及您要追加的位置。这样，您保留附加的对象，并且应该能够将其作为标准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++;

});

Answer 3

您可以修改一种非常简单的方法 - 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>');

动态创建独特的按钮

3 个答案: